Laravel 10 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 10 Vue Js Multiple Image Upload Using Dropzone Example
- Step 1: Install Laravel 10 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 10 App
First of all, start your terminal to download or install Laravel 10 new setup. Run the following commands in it to install the new Laravel 10 app on your system:
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:
Install all Vue dependencies:
After that, install vue dropzone dependencies by using the below command:
npm install vue2-dropzone
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']);
Step 4: Create Controller By Command
Next step, open your command prompt and run the following command to create a controller by an artisan:
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.']);
}
}
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'
});
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>
Step 7: Run Development Server
Run the following command 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.
