Laravel 7 Vue Js Multiple Image Upload Using Dropzone Example

In this tutorial you will learn about the Laravel 7 Vue Js Multiple Image Upload Using Dropzone Example and its application with practical example.

In this Laravel 7 Vue Js Multiple Image Upload Using Dropzone Example tutorial, I will show you how to upload multiple 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 :-

Table Of Contents−

Laravel 7 Vue Js Multiple Image Upload Using Dropzone Example

Uploading multiple images with dropzone
Saving images with unique file names to database

Step 1: Download Laravel Fresh 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: Download Laravel Fresh App

First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command

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

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

Step 2: NPM Module Configuration For Vue Js

php artisan preset vue

1	php artisan preset vue

Install all Vue dependencies:

npm install

1	npm install

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

npm install vue2-dropzone

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

//all events
Route::post('store-multiple-image','ImageController@store');

1 2	//all events Route::post('store-multiple-image','ImageController@store');

Step 4: Create Controller By Command

Now, lets create a controller named ImageController using command given below –

php artisan make:controller ImageController

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

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

Now, go to resources/assets/js/components folder and create a file called MultipleImageUploadComponent.vue.

Now, put 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>

<div class="card-header">Example Component</div>

I'm an example component.

<vue-dropzone ref="myVueDropzone" id="dropzone" :options="dropzoneOptions"></vue-dropzone>

</div>

</template>

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

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 - W3ADDA.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>

<!DOCTYPE html>

<html>

<head>

<title>Laravel Vue JS Multiple Image Upload Using vue-dropzone Example - W3ADDA.com</title>

</head>

<body>

<multiple-image-component></multiple-image-component>

</div>

</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 –

npm run dev
or 
npm run watch

npm run dev

npm run watch

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Laravel 7 Vue Js Multiple Image Upload Using Dropzone Example