Laravel 11 Vue Js Drag & Drop Image Upload Using Dropzone

Laravel 11 Vue js dropzone example; In this tutorial, i am going to show you how to drag and drop multiple images or files for upload using vue-dropzone in laravel vue js apps.

Laravel 11 Vue Js Drag & Drop Image Upload Using Dropzone

Follow the following steps to implement drag and drop image upload using dropzone in laravel vue js apps:

Step 1: Install Laravel 11 App
Step 2: NPM Module Configuration For Vue Js
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: Install Laravel 11 App

Run the following command on command prompt to install laravel apps:

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

Step 2: NPM Module Configuration For Vue Js

Run the following command on command prompt to install Vue dependencies using NPM:

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

Visit to routes folder and open web.php file and add the following routes into your file:

use App\Http\Controllers\ImageController;
Route::post('store-multiple-image', [ImageController::class, 'store']);

Step 4: Create Controller By Command

Run the following command on command prompt to create a controller by an artisan:

php artisan make:controller ImageController

Visit 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

Visit 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

Go 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 - Laratutorials.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 on command prompt 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.

Laravel 11 Vue Js Drag & Drop Image Upload Using Dropzone