Laravel 8 Vue Js Drag & Drop Image Upload Using Dropzone

 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

1 2 3

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:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<?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:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

<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:

1 2 3 4 5 6 7 8 9

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:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<!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:

1 2 3

npm run dev or npm run watch