Quasar multiple file upload with laravel API

Quasar multiple file upload using backend laravel API

Hello friends, in this post I am going to show you quasar multiple file upload tutorial using Laravel API in Quasar. So basically, 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. Make user you get the multiple q-uploader component for this.

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

Or you can place the following component code in your quasar project to begin quasar multiple file upload process. If you got the component from quasar site, make sure you modified it as below code.

  <q-uploader
    style=""
    label="Sub Images (Max 3)"
    max-files="3"
    multiple
    auto-upload
    accept=".jpg, image/*"
    :factory="uploadSubImages"
    @rejected="onRejected"
  />

So as a quick intro about above code, we can assign attributes for q-uploader as I mentioned in the single image upload article. As previous article we wont give the URL directly as a attribute because using a separate function for the uploading we can do more things than basics. So in this component we use max-files attribute and multiple attribute that we didn’t used in single image uploader. We have to use those attributes because of we are going to upload multiple images. auto-upload attribute will run the factory method which is uploadSubImages method suddenly when user uploaded images. If you don’t want to upload images automatically, you can remove auto-upload attribute. So you have to click on submit in the q-uploader to upload the images.

So now define the sub_files_paths string in data and also uploading and onRejected method in methods section. The function names need to be similar to the function you have given on :factory of q-uploader

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

methods: {

 uploadSubImages (files) {
     
      this.sub_files_paths = files[0]
      const fileData = new FormData()
     
      fileData.append('sub_files_paths ', this.sub_files_paths )
     
      //Replace http://localhost:8000 with your API URL
      const updateSubImages = this.$axios.post('http://localhost:8000/multiuploads', 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: `Sub Images Uploaded`
        })
       
      }).catch(error => {
        this.$q.loading.hide()
      });
     
 },

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:- To work notify properly, you should install the Notify plugin. You can find it from the official Quasar website and follow the instructions.

Laravel API Backend

Now add routes and functions to execute those API calls.

Go to web.php

For pure Laravel API

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

For Laravel/Lumen API

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

In the FileUploaderController

  public function multiuploads(Request $request){

        $this->validate($request, [
          
            'sub_files_paths'=>'required'
        ]);
        try {
            $sub_files_original_paths = (object) ['sub_files_paths' => ""];        
          
            if ($request->hasFile('sub_files_paths')) {
                $original_filename = $request->file('sub_files_paths')->getClientOriginalName();
                $original_filename_arr = explode('.', $original_filename);
                $file_ext = end($original_filename_arr);
                $destination_path = './uploads/subfiles/';
                $sub_image_name = 'C-' . time() . rand(10,100) . '.' . $file_ext;
    
                if ($request->file('sub_files_paths')->move($destination_path, $sub_image_name)) {
                   
                    $subImageUploadPath = '/uploads/subfiles/'.$sub_image_name;
    
                    return response() -> json(['path'=>$subImageUploadPath], 201);
                } else {
                    return response() -> json('Cannot upload file');
                }}
            } catch (Exception $e) {
                     throw new NotFoundException('Upload Failed');
            }
        
    }

That’s it!! If you have any questions please comment below. If you want to check Single Image Uploading Go to below link.

Or check my latest posts.

Check the latest posts