• 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 multiple file upload with laravel API

nsr by nsr
January 21, 2021
in Laravel, Quasar, Vue, Web Development
0
Quasar multiple file upload with laravel API

Quasar multiple file upload with laravel API

0
SHARES
78
VIEWS
Share on FacebookShare on Twitter

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.

READ ALSO

Enable CORS on Lumen API

Laravel Specified Key Was Too Long Fix

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.

Quasar file upload process with laravel API
Quasar single file upload

Or check my latest posts.

Check the latest posts

Related Posts

Enable CORS on Lumen API
Laravel

Enable CORS on Lumen API

February 6, 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
quasar google maps
Mobile Development

Quasar Google maps with places

October 7, 2020
Next Post
Enable CORS on Lumen API

Enable CORS on Lumen API

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

Git branch not showing in Visual Studio Code fix

Git branch not showing in Visual Studio Code fix

January 20, 2021
laravel tutorial for absolute beginners

Laravel tutorial for absolute beginners

November 2, 2020
How to use Gmail as default mail in Lumen

How to use Gmail as default mail in Lumen

October 24, 2020
Enable CORS on Lumen API

Enable CORS on Lumen API

February 6, 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