Drag and Drop image/file upload using dropzone js in laravel 8 vue js example; In this tutorial, i am going to show you how to integrate dropzone js in vue and laravel 8 for drag and drop multiple images or files for upload using vue-dropzone in laravel vue js apps.
Dropzone. js is ‘a light weight JavaScript library that turns an HTML element into a “dropzone“‘. Users can drag and drop a file onto an area of the page, uploading to a server. js code to our project and create a ‘drop area’ for file uploading.
Drag and Drop Multiple File/Image Upload Using Dropzone in Vue Js and Laravel 8
- Step 1: Install Laravel 8 App
- Step 2: NPM Module Configuration For Vue Js
- Step 3: Install Vue-dropzone npm
- Step 4: Add Routes
- Step 5: Create Controller By Command
- Step 6: Create ImageUplaod Vue Component
- Step 7: Create Blade Views And Initialize Vue Components
- Step 8: Run Development Server
Step 1: Install Laravel 8 App
Execute the following command on terminal to install laravel latest application:
composer create-project --prefer-dist laravel/laravel blog
Step 2: NPM Module Configuration For Vue Js
Setup and configure Vue and install Vue dependencies using NPM. So run the following command on command prompt:
php artisan preset vue npm install
Step 3: Install Vue-dropzone npm
Execute the following command on terminal to install vue dropzone js:
npm install vue2-dropzone
Step 4: Add Routes
Create routes; so visit routes directory 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 5: Create Controller By Command
Create controller by executing the following command on terminal:
php artisan make:controller ImageController
The visit 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 6: Create ImageUplaod Vue Component
Create Image upload vue component; so visit resources/assets/js/components
folder and create a file called MultipleImageUploadComponent.vue.
Then 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 7: 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 8: Run Development Server
Run the following command to start the development server:
npm run dev or npm run watch
Conclusion
Laravel 8 vue drag and drop image upload using dropzone js example, you have learned how to upload multiple files or images using vue dropzone package in laravel vue app.