Laravel 9 - Drag and Drop file upload using Dropzone

Drag and Drop file upload using Dropzone with Laravel 9

Step 1 : Download Dropzone JS
Step 2 : Route
Step 3 : Controller
Step 4 : View
Step 5 : Conclusion

Step 1 : Download Dropzone JS

First download the Dropzone library from Github.

Then you have to extract the downloaded files into public/ directory.

Step 2 : Route

Once you had extracted the dropzone file then you have to make route.

Goto routes/web.php and add the two route as shown below

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

The POST Route is use to dropzone file upload.

Also Read : Rest API Authentication with Passport Laravel 9

Step 3 : Controller

After that we are going to create a controller.

So we are creating a UsersController by using the following command

php artisan make:controller UsersController

Go to app/Http/Controllers/UsersController.php file and add the following:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

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/';

       // 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 = $request->file('file')->getClientOriginalName().time() .'.' . $extension;
         // Uploading file to given path
         $request->file('file')->move($destinationPath, $fileName); 

       }

     }
  }
}

Also Read : How to Create Tabs Using Tailwind CSS and Alpine JS

Step 4 : View

Create a new folder in resources/views/ as users and create a file name index.blade.php

index.blade.php

<!DOCTYPE html>
<html>
  <head>
    <title>Drag and Drop file upload with Dropzone in Laravel 7</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>

That it’s! Now you can drag and drop file using Dropzone in laravel 9.

Run following command to start the server

php artisan serve

now open,

http://127.0.0.1:8000/

Step 5 : Conclusion

You need to pass the CSRF token to upload the file using Dropzone. For this require to explicitly initialize dropzone and pass the token. If you found this tutorial helpful then don’t forget to share.

Also Read : Fetch records from MySQL with jQuery AJAX – Laravel 9