Drag and drop file uploading using Dropzone.js in Laravel 8
Dropzone.js is open source lightweight jQuery library that provides easy way to upload and preview files using drag and drop method. Dropzone.js is easy to integrate. It provides large file uploads with progress bar and also supports file preview.
In this article, we will use Dropzone.js in latest Laravel 8 to upload multiple file supports. First of create Laravel fresh application using composer command.
composer create-project laravel/laravel dropzone
Now first of all create two new routes in routes/web.php, for upload view and file uploads.
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\HomeController;
Route::get('upload', [HomeController::class, 'upload'])->name('upload');
Route::post('store', [HomeController::class, 'store'])->name('store');
Next step is create HomeController and add two methods to handle routes. For that create controller using below command.
php artisan make:controller HomeController
Open app/Http/Controllers/HomeController.php file and add these methods.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class HomeController extends Controller
{
/**
* The file upload view
*
* @return view
*/
public function upload()
{
return view('upload');
}
/**
* store files
*
* @return view
*/
public function store(Request $request)
{
if($request->hasFile('file')) {
$image = $request->file('file');
$image_name = time().$image->getClientOriginalName();
$image->move(public_path('images'), $image_name);
}
}
}
Now create upload blade file for view. Create new file resource/views/upload.blade.php and add the below view code in it. For Dropzone, we will use source files from CDN. You can simply use CDN or download source file from Dropzone.
<!DOCTYPE html>
<html>
<head>
<title>File upload</title>
<meta charset="utf-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/basic.min.css"/>
<style type="text/css">
.dropzone {
border:2px dashed #999999;
border-radius: 10px;
}
.dropzone .dz-default.dz-message {
height: 200px;
background-size: 132px 132px;
margin-top: -101.5px;
background-position-x: center;
}
.dropzone .dz-default.dz-message span {
display: block;
margin-top: 145px;
font-size: 20px;
text-align: center;
}
.dropzone .dz-button {
display: none;
}
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/min/dropzone.min.js"></script>
</head>
<body>
<div class='container'>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<form action="{{ route('store') }}" class='dropzone' id="my-dropzone"></form>
</div>
</div>
</div>
<script type="text/javascript">
var csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute("content");
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone(".dropzone", {
maxFilesize: 5,
acceptedFiles: ".jpeg,.jpg,.png,.pdf",
});
myDropzone.on("sending", function(file, xhr, formData) {
formData.append("_token", csrfToken);
});
</script>
</body>
</html>
That's it. The dropzone is ready to file upload.
Now run Laravel project with php artisan serve command and open http://localhost:8000/upload/ in your browser.
If you want more control over Dropzone, here you can find more configurations and events.
If you liked this article, please do share with your colleagues.
Copyright 2024 ErrorGram