In this tutorial you will learn about the Laravel 8 Vue Js Drag & Drop Image Upload Using Dropzone and its application with practical example.
In this Laravel 8 Vue Js Drag & Drop Image Upload Using Dropzone Example tutorial, I will show you how to upload image file using dropzone drag and drop. In this tutorial you will learn to implement drag and drop image upload using dropzone package with Vue Js in laravel. In this tutorial we learn to :-
- Uploading multiple images with dropzone
- Saving images with unique file names to database
Laravel 8 Vue Js Drag & Drop Image Upload Using Dropzone
- 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
First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command
|
1 |
composer create-project --prefer-dist laravel/laravel blog |
Step 2: NPM Module Configuration For Vue Js
|
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 |
Step 3: Add Routes
After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.
routes/web.php
|
1 2 3 |
use App\Http\Controllers\ImageController; Route::post('store-multiple-image', [ImageController::class, 'store']); |
Step 4: Create Controller By Command
Now, lets create a controller named ImageController using command given below –
|
1 |
php artisan make:controller ImageController |
Now, go to app\Http\Controllers and open ImageController.php file. Then put 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.']); } } |
Step 5: Create ImageUplaod Vue Component
In this step we will create a Image upload component. Now, go to resources/assets/js/components folder and create a file called MultipleImageUploadComponent.vue. Then put 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' }); |
|
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' }); |
Step 6: Create Blade Views And Initialize Vue Components
In this step we will create blade view file, go to resources/views/ and open welocome.blade.php. Then put 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</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
Now we are ready to run our example so lets start the development server using following artisan command –
|
1 2 3 |
npm run dev or npm run watch |
