In this article, I will show you how to drag and drop file in laravel 8.0. Drag and drop in laravel is very simple. In this post, you will learn uploading multiple files just drag and drop using dropzone. You will learn to Drag and drop files upload in laravel.
Dropzone.js is a jquery plugin, dropzone.js through we can select one by one image and also with preview. After choosing the image from browse, we can see the preview of the image. dropzone.js also provide filters like we can make validation for max upload, a specific image or file extension, etc.Using this dropzone plugin You will learn to Drag and drop files upload in laravel easily.
Step 1: Add Route
We added two routes, first one is for displayinh the page and second one is for uploading the files. lest do it,
Read Also: Google Recaptcha V3 Example Tutorial in Laravel 8
Route::get('dropzone', [DropzoneController::class, 'dropzone']);
Route::post('dropzone/store', [DropzoneController::class, 'dropzoneStore'])->name('dropzone.store');
Step 2: Create Controller
Create DropzoneController controller
php artisan make:controller DropzoneController
app/Http/Controllers/DropzoneController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class DropzoneController extends Controller
{
public function dropzone()
{
return view('dropzone-view');
}
public function dropzoneStore(Request $request)
{
$image = $request->file('file');
$imageName = time().'.'.$image->extension();
$image->move(public_path('images'),$imageName);
return response()->json(['success'=>$imageName]);
}
}
Step 3: Add Blade File
READ ALSO: Laravel 8 REST API Authentication with Sanctum
<!DOCTYPE html>
<html>
<head>
<title>Drag & Drop File Upload in Laravel 8 using Dropzone JS</title>
<link rel="stylesheet" href="http://demo.itsolutionstuff.com/plugin/bootstrap-3.min.css">
<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>
<style>
.dropzone {
background-color: #4a5568;
border-radius: 50px;
color: #fff;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Drag & Drop File Upload in Laravel 8 using Dropzone JS</h1>
<form action="{{ route('dropzone.store') }}" method="post" enctype="multipart/form-data" id="image-upload" class="dropzone">
@csrf
<div>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
Dropzone.options.imageUpload = {
maxFilesize : 1,
acceptedFiles: ".jpeg,.jpg,.png,.gif"
};
</script>
</body>
</html>
Top comments (0)