Drag and Drop file upload using Dropzone in Laravel

1. Download

Download Dropzone library from here
Extract the downloaded files in public/ directory.

2. Route

Download Dropzone library from here
Extract the downloaded files in public/ directory.

Route::get('/','UsersController@index');
Route::post('/users/fileupload/','UsersController@fileupload')->name('users.fileupload');

Download Dropzone library from here
Extract the downloaded files in public/ directory.

3. Controller

Download Dropzone library from here
Extract the downloaded files in public/ directory.

php artisan make:controller UsersController

Download Dropzone library from here
Extract the downloaded files in public/ directory.

Assign upload location to $destinationPath variable. Create a directory if not exists.

Get the file extension and initialize valid file extension in $validextensions Array.

Check the file extension is exists in $validextension Array. If exists then rename the file and upload it.

Completed Code

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use Carbon\Carbon;

class UsersController extends Controller {

  public function index(){
    return view('users.index');
  }

  /*
  File upload
  */ 
  public function fileupload(Request $request){

     if($request->hasFile('file')) {

       // Upload path
       $destinationPath = 'files/';

       // Create directory if not exists
       if (!file_exists($destinationPath)) {
          mkdir($destinationPath, 0755, true);
       }

       // Get file extension
       $extension = $request->file('file')->getClientOriginalExtension();

       // Valid extensions
       $validextensions = array("jpeg","jpg","png","pdf");

       // Check extension
       if(in_array(strtolower($extension), $validextensions)){

         // Rename file 
         $fileName = str_slug(Carbon::now()->toDayDateTimeString()).rand(11111, 99999) .'.' . $extension;

         // Uploading file to given path
         $request->file('file')->move($destinationPath, $fileName); 

       }

     }
  }
}

4. View

Create file –

Download Dropzone library from here
Extract the downloaded files in public/ directory.

Include CSS and JS –

Download Dropzone library from here
Extract the downloaded files in public/ directory.

Dropzone container –

Download Dropzone library from here
Extract the downloaded files in public/ directory.

Script –

Download Dropzone library from here
Extract the downloaded files in public/ directory.

Completed Code

<!DOCTYPE html>
<html>
  <head>
    <title>Drag and Drop file upload with Dropzone in Laravel</title>

    <!-- Meta -->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="{{asset('dropzone/dist/min/dropzone.min.css')}}">

    <!-- JS -->
    <script src="{{asset('dropzone/dist/min/dropzone.min.js')}}" type="text/javascript"></script>

  </head>
  <body>

    <div class='content'>
      <!-- Dropzone -->
      <form action="{{route('users.fileupload')}}" class='dropzone' >
      </form> 
    </div> 

    <!-- Script -->
    <script>
    var CSRF_TOKEN = document.querySelector('meta[name="csrf-token"]').getAttribute("content");

    Dropzone.autoDiscover = false;
    var myDropzone = new Dropzone(".dropzone",{ 
        maxFilesize: 3,  // 3 mb
        acceptedFiles: ".jpeg,.jpg,.png,.pdf",
    });
    myDropzone.on("sending", function(file, xhr, formData) {
       formData.append("_token", CSRF_TOKEN);
    }); 
    </script>

  </body>
</html>