Laravel 8 Vue Js Drag & Drop Image Upload Using Dropzone

Laravel 8 Vue js dropzone example. In this tutorial, you will learn how to drag and drop multiple images or files for upload using vue-dropzone in laravel vue js apps.

Sometime, you work with laravel vue js apps. And at that time, you need to upload multiple files with showing a preview.

So this laravel vue-dropzone example will guide you on how to upload multiple image file and display preview in laravel vue js apps.

Laravel 8 Vue Js Multiple Image Upload Using Dropzone Example

Step 1: Install Laravel 8 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 8 App

In this step, you need to install laravel latest application setup, So open your terminal OR command prompt and run the following command:

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

Step 2: NPM Module Configuration For Vue Js

You need to setup Vue and install Vue dependencies using NPM. So run the following command on command prompt:

1	`php artisan preset vue`

Install all Vue dependencies:

1	`npm install`

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

1	`npm install vue2-dropzone`

Recommended:- Laravel 8 Vue JS Post Axios Request Tutorial

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']);

Recommended:- Laravel 8 Vue JS File Upload Tutorial Example

Step 4: Create Controller By Command

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

1	`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.']);
    }
}

Recommended:- Laravel 8 Vue JS Live Search Example

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'
});

Recommended:- Laravel 8 Vue Js Infinity Page Scroll Example

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>

Recommended:- How to implement Datatables with Vuejs And Laravel 8

Step 7: Run Development Server

Run the following command to start the development server:

npm run dev
or 
npm run watch

23 February, 2021

Laravel 8 Vue Js Drag & Drop Image Upload Using Dropzone