Quasar file upload process with laravel API

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.

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.

Or check my latest posts.

Check the latest posts