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:
<?php
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:
<?php
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>
<html>
<head>
<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">
</head>
<body>
<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">
@csrf
<div>
<h3>Upload Multiple Image By Click On Box</h3>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
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"
};
</script>
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:
http://127.0.0.1:8000/drog-drop-form
Conclusion
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.
