Laravel Vue JS Document Transfer Utilizing vue-dropzone Model

 At the point when we expect to add simplified record transfer then we generally pick dropzone js for that since it is marvelous. So in this instructional exercise, I might want to impart to you vue js document transfer utilizing vue-dropzone part in laravel 6, laravel 7, laravel 8 and laravel 9. fundamentally, you can likewise utilize dropzone js in your vue js script.

Here, I make model bit by bit of vue.js dropzone picture or record transferring. We will go without any preparation in this way, first we will download laravel 5.6 and afterward we will instate vue js then introduce vue-dropzone bundle. After that we will make one post course and one regulator with one technique. We will make POST technique on regulator and compose code for save picture and furthermore you can compose more subtleties on it.

In this way, Simply follow under hardly any step and afterward get full illustration of picture or record transfer utilizing vue-dropzone part.

Step 1 : Install Laravel 5.6 Project

In first step, we will install Laravel 5.6 application using bellow command, So open your terminal OR command prompt and run bellow command:

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

Step 2: Create Route

In second step, we will create one post route and write image or file upload code. So, let's add new route on that file.

routes/web.php

Route::post('formSubmit','ImageController@formSubmit');

Read Also: Dynamic Form Validation in VueJs with PHP Laravel 5.6

Step 3: Create Controller

in this step, now we have create ImageController with formSubmit methods, in this method we will write code of store image or file on server. So let's create controller:

app/Http/Controllers/ImageController.php

<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
  
class ImageController extends Controller
{
    /**
     * success response method.
     *
     * @return \Illuminate\Http\Response
     */
    public function formSubmit(Request $request)
    {
    	$imageName = time().'.'.$request->file->getClientOriginalExtension();
        $request->file->move(public_path('images'), $imageName);
         
    	return response()->json(['success'=>'You have successfully upload file.']);
    }
}

Step 4: NPM Configuration

Here, we have to first add setup of vue js and then install npm and also vue-dropzone package, so let's run bellow command in your project.

Install vue:

php artisan preset vue

Install npm:

npm install

Install vue-dropzone:

npm install vue2-dropzone

Step 5: Write on app.js and Components

In this step, we will write code on app.js and then we will create vue js components, So let's create both file and put bellow code:

resources/assets/js/app.js

 
require('./bootstrap');
 
window.Vue = require('vue');
 
Vue.component('example-component', require('./components/ExampleComponent.vue'));
 
const app = new Vue({
    el: '#app'
});

resources/assets/js/components/ExampleComponent.vue

<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: '/formSubmit',
              headers: {
                "X-CSRF-TOKEN": document.head.querySelector("[name=csrf-token]").content
               }
          }
        }
      },
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

Step 6: Update welcome.blade.php

At last step, we will update our welcome.blade.php file. in this file we will use app.js file and use it, so let's update.

resources/views/welcome.blade.php

<!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 File Upload Using vue-dropzone Example - ItSolutionStuff.com</title>
        <link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="app">
            <example-component></example-component>
        </div>
        <script src="{{asset('js/app.js')}}" ></script>
    </body>
</html>