In Laravel, you can use drag and drop file upload functionality by utilizing JavaScript libraries such as Dropzone.js or Dropzone. These libraries provide an intuitive & user-friendly way to handle file uploads through drag and drop actions. Here's how you can integrate drag and drop file upload in Laravel using Dropzone.js
Step 1: Install Laravel App
composer create-project laravel/laravel example-app
Step 2: Create Controller
app/Http/Controllers/DropzoneController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\View\View;
use Illuminate\Http\JsonResponse;
class DropzoneController extends Controller
{
/**
* Generate Image upload View
*
* @return void
*/
public function index(): View
{
return view('dropzone');
}
/**
* Image Upload Code
*
* @return void
*/
public function store(Request $request): JsonResponse
{
$image = $request->file('file');
$imageName = time().'.'.$image->extension();
$image->move(public_path('images'),$imageName);
return response()->json(['success'=>$imageName]);
}
}
Step 3: Add Routes
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\DropzoneController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::controller(DropzoneController::class)->group(function(){
Route::get('dropzone', 'index');
Route::post('dropzone/store', 'store')->name('dropzone.store');
});
Step 4: Add View File
resources/views/dropzone.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel 10 Drag and Drop File Upload with Dropzone JS - webthestuff.com</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Laravel 10 Drag and Drop File Upload with Dropzone JS - webthestuff.com</h1>
<form action="{{ route('dropzone.store') }}" method="post" enctype="multipart/form-data" id="image-upload" class="dropzone">
@csrf
<div>
<h4>Upload Multiple Image By Click On Box</h4>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
Dropzone.autoDiscover = false;
var dropzone = new Dropzone('#image-upload', {
thumbnailWidth: 200,
maxFilesize: 1,
acceptedFiles: ".jpeg,.jpg,.png,.gif"
});
</script>
</body>
</html>
Run Laravel App:
php artisan serve
Now, Go to web browser, type the URL and see the output:
http://localhost:8000/dropzone
