Laravel 10 Vue JS Multiple File Upload with Vue-dropzone Example

Uploading image files in Laravel vue js is very easy by drag and drop. For this vue-dropzone package is available in Laravel vue js. By using this you can easily do this.

So, In this tutorial, you will learn how to upload multiple image file with drag and drop functionality using vue-dropzone in laravel 10 vue js apps.

Laravel 10 Vue JS Drag and Drop Multiple File Upload with Vue-dropzone Example

Steps to upload an multiple file with drag-drop using vue-dropzone in laravel 10 vue js apps:

• Step 1: Setup Laravel 10 App
• Step 2: Install and Configure Vue Js and Dropzone
• Step 3: Add Routes
• Step 4: Create Controller By Command
• Step 5: Create ImageUplaod Vue Component
• Step 6: Create Blade Views And Initialize Vue Components
• Step 7: Run Development Server

Step 1: Setup Laravel 10 App

First of all, Open your terminal or command prompt.

Then execute the following command into it to download or install Laravel 10 new setup in your server:

 composer create-project --prefer-dist laravel/laravel blog 

Step 2: Install and Configure Vue Js and Dropzone

Once you have installed laravel apps on your server. Now, you need to install and configure vue js.

So, execute the following commands on the command prompt or terminal to install vue.js in laravel apps:

php artisan preset vue

Install all Vue dependencies:

npm install

After that, install vue dropzone dependencies by using the below command:

npm install vue2-dropzone

Step 3: Add Routes

Next step, go to routes folder and open web.php file and add the following routes into your file:

routes/web.php

use App\Http\Controllers\ImageController;

Route::post('store-multiple-image', [ImageController::class, 'store']);

Step 4: Create Controller By Command

Next step, open your command prompt and run the following command to create a controller by an artisan:

php artisan make:controller ImageController

After that, go to app\Http\Controllers and open ImageController.php file. Then update the following code into your ImageController.php file:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ImageController extends Controller
{
    /**
     * success response method.
     *
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
    	$imageName = time().'.'.$request->file->getClientOriginalExtension();
        $request->file->move(public_path('images'), $imageName);

    	return response()->json(['success'=>'You have successfully upload file.']);
    }
}

Step 5: Create ImageUplaod Vue Component

Next step, go to resources/assets/js/components folder and create a file called MultipleImageUploadComponent.vue.

Now, update the following code into your MultipleImageUploadComponent.vue components file:

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Example Component</div>
                    <div class="card-body">
                        I'm an example component.
                        <vue-dropzone ref="myVueDropzone" id="dropzone" :options="dropzoneOptions"></vue-dropzone>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

import vue2Dropzone from 'vue2-dropzone'
import 'vue2-dropzone/dist/vue2Dropzone.min.css'

    export default {
     components: {
        vueDropzone: vue2Dropzone
      },
      data: function () {
        return {
          dropzoneOptions: {
              url: '/store-multiple-image',
              headers: {
                "X-CSRF-TOKEN": document.head.querySelector("[name=csrf-token]").content
               }
          }
        }
      },
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

Now open resources/assets/js/app.js and include the  MultipleImageUploadComponent.vue component as follow:

require('./bootstrap');

window.Vue = require('vue');

Vue.component('multiple-image-component', require('./components/MultipleImageUploadComponent.vue'));

const app = new Vue({
    el: '#app'
});

Step 6: Create Blade Views And Initialize Vue Components

Next, Navigate to resources/views/ and open welocome.blade.php. Then update the following code into your welcome.blade.php file as follow:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel Vue JS Multiple Image Upload Using vue-dropzone Example - Tutsmake.com</title>
        <link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="app">
            <multiple-image-component></multiple-image-component>
        </div>
        <script src="{{asset('js/app.js')}}" ></script>
    </body>
</html>

Step 7: Run Development Server

Run the following command to start the development server:

npm run dev
or
npm run watch

Conclusion

In this laravel vue dropzone js example, you have learned how to upload multiple files or images using vue dropzone package in laravel vue app.

Recommended Laravel 10 Posts