Drag and Drop Upload Image File in Laravel 11

Drag and Drop Upload Image File in Laravel 11

To upload images in Laravel 11 by drag and drop you can use jQuery plugin DropZone js, it is a lightweight plugin that gives the option to drag and drop image file upload with a preview and delete.

In this guide, we will create drag and drop image uploads with a preview & delete option using jQuery Dropzone JS in Laravel 11 application.

Laravel 11 Drag and Drop Image/File Upload Example Tutorial

Steps to drag and drop Image/File upload with delete and preview in Laravel 11 applications:

Step 1 – Download New Laravel Application

Run the composer create-project --prefer-dist laravel/laravel myApp command on cmd to download and set up new laravel application into your system:

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

Step 2 – Define Routes

Open the web.php file from the Routes folder and create two routes in it, one to show the drag and drop image upload form and the other to send form image file to the server for uploading it, like the following:

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\DragDropController;

Route::get('drag-drop-form', [DragDropController::class, 'form']);
Route::post('uploadFiles', [DragDropController::class, 'uploadFiles']);

Step 3 – Create Drag and Drop Controller File

Run the php artisan make:controller DragDropController on cmd or terminal window to create a controller file:

php artisan make:controller DragDropController

Open DragDropController.php file from app/http/controllers folder and create two methods in it to handle drag and drop image upload with preview:

namespace App\Http\Controllers;
use Illuminate\Http\Request;
class DragDropController extends Controller
     * Generate Image upload View
     * @return void
    public function form()
        return view('drop-drop');
     * Image Upload Code
     * @return void
       public function uploadFiles(Request $request)
        $image = $request->file('file');
        $imageName = time().'.'.$image->extension();
        $path = $image->store('public/images');
        return response()->json(['success'=>$imageName]);

Step 4 – Create Blade View

Navigate to resources/views folder, and create drag-drop.blade.php file, and then create a form in it; Like the following:

<!DOCTYPE html>
    <title>Laravel 11 Drag & Drop Image Upload Example - Tutsmake.com</title>
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<div class="container mt-2">
    <div class="row">
        <div class="col-md-12">
            <h1 class="mt-2 mb-2">Laravel 11 Drag & Drop Image Upload Example - Tutsmake.com</h1>
            <form action="{{ URL('uploadFiles') }}" method="post" enctype="multipart/form-data" id="image-upload" class="dropzone">
                    <h3>Upload Multiple Image By Click On Box</h3>

Now, import the Dropzone.js CSS and JS file in your blade view file and then initialize Dropzone JS along its functions to use drag-drop image file upload with preview and delete options; Like the following:

<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/min/dropzone.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.2.0/min/dropzone.min.js"></script>

<script type="text/javascript">
        Dropzone.options.imageUpload = {
            maxFilesize         :       1,
            acceptedFiles: ".jpeg,.jpg,.png,.gif"

Step 5 – Run and Test Application

Run php artisan serve command on cmd to start application for testing:

php artisan serve

Now open the following URL on browser:


We hope you have learned how to drag and drop image files upload with preview and delete option in Laravel 11 application using jQuery Dropzone JS.

Recommended Guides


Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

Your email address will not be published. Required fields are marked *