Laravel 9 Drag And Drop File Upload Using Dropzone JS

In this article, we will see laravel 9 drag and drop file upload using dropzone js. Dropzone JS is an open-source library that provides drag and drops file uploads with image previews. Here, we will see laravel 9 dropzone multiple image uploads. So, we will learn how to upload files using dropzone js in laravel 9. Dropzone is a javascript jquery plugin, using dropzone.js we can select one by one image with a preview. After choosing an image from browse we can see the preview of the image.

dropzone.js also provides a filter like we can make validation for maximum image upload, a specific image, or file extension like png, jpg, etc. There are two ways to add Dropzone to your projects using npm and Stand-alone file.

So, let's see dropzone image upload in laravel 9 and multiple files upload using dropzone in laravel 9.

Drag And Drop File Upload With Dropzone JS In Laravel 9

Step 1: Add Route In web.php File

In this step, we will add routes to the web.php file.

Route::get('dropzone/example', 'App\Http\Controllers\UserController@dropzoneExample');
Route::post('dropzone/store', 'App\Http\Controllers\UserController@dropzoneStore')->name('');



Step 2: Create Controller

Now, create a controller and add the below code for image upload.

Note: Create a new images folder in your public folder to save images.


namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\User;

class UserController extends Controller

    public function dropzoneExample()
        return view('dropzone_view');

    public function dropzoneStore(Request $request)
        $image = $request->file('file');

        $imageName = time().'.'.$image->extension();
        return response()->json(['success'=>$imageName]);


Step 3: Add Blade File For View

 In this step, create blade file for view output in this path resources\views\dropzone_view.blade.php

    <title>Laravel 9 Drag And Drop File Upload Using Dropzone JS - Techsolutionstuff</title>
    <link href="" rel="stylesheet">
  <script src=""></script>  
    <link href="" rel="stylesheet">
     <script src=""></script>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1 class="text-center">Laravel 9 Drag And Drop File Upload Using Dropzone JS - Techsolutionstuff</h1><br>
            <form action="{{route('')}}" method="post" name="file" files="true" enctype="multipart/form-data" class="dropzone" id="image-upload">
                <h3 class="text-center">Upload Multiple Images</h3>
<script type="text/javascript">
        Dropzone.options.imageUpload = {
            maxFilesize: 1,
            acceptedFiles: ".jpeg,.jpg,.png,.gif"


You might also like:


Techsolutionstuff | The Complete Guide

I'm a software engineer and the founder of Hailing from India, I craft articles, tutorials, tricks, and tips to aid developers. Explore Laravel, PHP, MySQL, jQuery, Bootstrap, Node.js, Vue.js, and AngularJS in our tech stack.