• About Us
  • Contact Us
  • Privacy Policy
NSR-TECH
No Result
View All Result
  • Login
No Result
View All Result
NSR-TECH
No Result
View All Result
Home Web Development Laravel

Quasar file upload process with laravel API

nsr by nsr
January 21, 2021
in Laravel, Quasar, Web Development
1
quasar-file-upload-img

quasar file upload

1
SHARES
420
VIEWS
Share on FacebookShare on Twitter

Easy method for quasar file upload using backend laravel API

Hello friends, in this post i am going to show you quasar file upload process tutorial using Laravel API in Quasar. In quasar we use q-uploader to upload files. It is easy and more efficient than other methods. This is a simple process and lets get started.

First of all get the q-uploader component from the quasar. This component is available in official quasar docs. I placed the link below. Go to the link and find the component.

READ ALSO

Enable CORS on Lumen API

Quasar multiple file upload with laravel API

https://quasar.dev/vue-components/uploader#QUploader-API

Or you can place the following component code in your quasar project to begin quasar file upload process

<q-uploader
   style="max-width: 300px"
   label="Main Image"
   :factory="uploadFile"
   max-files="1"
   accept=".jpg, image/*"
   @rejected="onRejected"
/>

So as a quick intro about above code, we can assign attributes for q-uploader component such as styles, label, max-files as limitations, accept as acceptable extensions. And specially in this tutorial we wont give the URL directly as a attribute. You can see in quasar docs they have used the URL in q-uploader attributes, but by using a separate function for handle the uploading process we can do more things.

In that case we are using :factory attribute to assign the function which we want run on submit and we are using @rejected with function name to call when user cancelled uploading.

So now define the file_path string in data and also uploading method and onRejected method in methods section. Make sure the name similar to the function you have given on :factory of q-uploader

data () {
  return {    
    file_path : null,
  }
},

methods: {
uploadFile(files) {
  
      this.file_path = files[0]
      const fileData = new FormData()
     
      fileData.append('file_path ', this.file_path)

       //Replace http://localhost:8000 with your API URL
      const uploadFile = this.$axios.post('http://localhost:8000/uploads', fileData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then((response) => {
        console.log(response.data);      
  
       // Notify plugin needs to be installed
       // https://quasar.dev/quasar-plugins/notify#Installation
        this.$q.notify({
          type: 'possitive',
          message: `Image Uploaded`
        })
      });
 },

onRejected (rejectedEntries) {
      // Notify plugin needs to be installed
      // https://quasar.dev/quasar-plugins/notify#Installation
      this.$q.notify({
        type: 'negative',
        message: `${rejectedEntries.length} file(s) did not pass validation constraints`
      })
 },
}

Note:- In order to work notify, you should install the Notify plugin as mentioned in the comment. You can find the plugin from the official Quasar site and follow the instructions to include the notify plugin

Now in Laravel Backend define routes and functions to handle those API calls

In web.php

For pure Laravel API

Route::post('/uploads', [FileUploaderController::class, 'uploads']);

For Laravel/Lumen API

$router->post('/uploads', 'FileUploaderController@uploads');

In the Controller

  public function uploads(Request $request){

        $this->validate($request, [
          
            'file_path'=>'required'
        ]);
        try {
            $file_original_path = (object) ['file_path' => ""];        
           
    
            if ($request->hasFile('file_path')) {
                $original_filename = $request->file('file_path')->getClientOriginalName();
                $original_filename_arr = explode('.', $original_filename);
                $file_ext = end($original_filename_arr);
                $destination_path = './uploads/files/';
                $file_path_name = 'C-' . time() . '.' . $file_ext;
    
                if ($request->file('file_path')->move($destination_path, $file_path_name )) {
                   
                    $uploadPath = '/uploads/files/'.$file_path_name ;
    
                  
                    return response() -> json(['path'=>$uploadPath, 'message' => 'File has been Successfully Uploaded'], 201);
                } else {
                    return response() -> json('Cannot upload file');
                }}
            } catch (Exception $e) {
                     throw new NotFoundException('Upload Failed');
            }
        
    }

Thats it!! If you have any questions please comment below. If you want to check Multiple Images Uploading Go to below link.

Quasar multiple file upload with laravel API

Or check my latest posts.

Check the latest posts

Tags: Quasar

Related Posts

Enable CORS on Lumen API
Laravel

Enable CORS on Lumen API

February 6, 2021
Quasar multiple file upload with laravel API
Laravel

Quasar multiple file upload with laravel API

January 21, 2021
Laravel Specified Key Was Too Long Fix
Laravel

Laravel Specified Key Was Too Long Fix

January 19, 2021
MySQL you do not have the super privilege issue fix
Tricks

MySQL you do not have the super privilege issue fix

January 19, 2021
how to seo vue.js site
Quasar

how to SEO vue.js site

January 10, 2021
Vue pagination with Laravel
Vue

Vue pagination with Laravel

October 10, 2020
Next Post
How to use Gmail as default mail in Lumen

How to use Gmail as default mail in Lumen

Comments 1

  1. Ammar says:
    5 months ago

    Thanks

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

POPULAR POSTS

quasar-file-upload-img

Quasar file upload process with laravel API

January 21, 2021
lumen framework tutorial

Lumen framework tutorial for beginners

October 24, 2020

Run cordova without android studio

September 12, 2020
quasar google maps

Quasar Google maps with places

October 7, 2020
MySQL you do not have the super privilege issue fix

MySQL you do not have the super privilege issue fix

January 19, 2021

EDITOR'S PICK

Enable CORS on Lumen API

Enable CORS on Lumen API

February 6, 2021
How to save media on iPhone storage

How to save media on iPhone storage

October 14, 2020
How to use Gmail as default mail in Lumen

How to use Gmail as default mail in Lumen

October 24, 2020
Laravel Specified Key Was Too Long Fix

Laravel Specified Key Was Too Long Fix

January 19, 2021

About

Nsrtech is a blog which brings you high quality and valuable articles to your life. All articles will be on different categories which all peoples can solve their issues in a single blog site.

Follow us

Categories

  • Laravel
  • Mobile Development
  • Networking Lessons
  • Others
  • Quasar
  • Quasar
  • Software Guides
  • Theories
  • Tricks
  • Vue
  • Web Development
  • Web Development Lessons

Recent Posts

  • Upgrade PHP from 7.2 to 7.3 on Ubuntu OS
  • Enable CORS on Lumen API
  • Quasar multiple file upload with laravel API
  • Git branch not showing in Visual Studio Code fix
  • Home
  • About Us
  • Contact Us
  • Privacy Policy

© 2020 NSR-TECH Blog .

No Result
View All Result
  • Homepages
    • Home Page 1
    • Home Page 2

© 2020 NSR-TECH Blog .

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In