Dropzone.js is one of the most popular drag and drop JavaScript libraries. It is free, fully open source, and makes it easy for you to handle dropped files on your website.
It’s meant to look good by default, and is highly customizable.
Today, We are going to learn how to upload a file using Dropzone easy drag and drop file.
Also Read : How to Install Alpine.js in Laravel 9
Drag and Drop file upload using Dropzone with Laravel 9
- Step 1 : Download Dropzone JS
- Step 2 : Route
- Step 3 : Controller
- Step 4 : View
- Step 5 : Conclusion
Step 1 : Download Dropzone JS
First download the Dropzone library from Github.
Then you have to extract the downloaded files into public/ directory.
Step 2 : Route
Once you had extracted the dropzone file then you have to make route.
Goto routes/web.php and add the two route as shown below
Route::get('/','UsersController@index');
Route::post('/users/fileupload/','UsersController@fileupload')->name('users.fileupload');
The POST Route is use to dropzone file upload.
Also Read : Rest API Authentication with Passport Laravel 9
Step 3 : Controller
After that we are going to create a controller.
So we are creating a UsersController by using the following command
php artisan make:controller UsersController
Go to app/Http/Controllers/UsersController.php file and add the following:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class UsersController extends Controller {
public function index(){
return view('users.index');
}
/*
File upload
*/
public function fileupload(Request $request){
if($request->hasFile('file')) {
// Upload path
$destinationPath = 'files/';
// Get file extension
$extension = $request->file('file')->getClientOriginalExtension();
// Valid extensions
$validextensions = array("jpeg","jpg","png","pdf");
// Check extension
if(in_array(strtolower($extension), $validextensions)){
// Rename file
$fileName = $request->file('file')->getClientOriginalName().time() .'.' . $extension;
// Uploading file to given path
$request->file('file')->move($destinationPath, $fileName);
}
}
}
}
Also Read : How to Create Tabs Using Tailwind CSS and Alpine JS
Step 4 : View
Create a new folder in resources/views/ as users and create a file name index.blade.php
index.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Drag and Drop file upload with Dropzone in Laravel 7</title>
<!-- Meta -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="{{asset('dropzone/dist/min/dropzone.min.css')}}">
<!-- JS -->
<script src="{{asset('dropzone/dist/min/dropzone.min.js')}}" type="text/javascript"></script>
</head>
<body>
<div class='content'>
<!-- Dropzone -->
<form action="{{route('users.fileupload')}}" class='dropzone' >
</form>
</div>
<!-- Script -->
<script>
var CSRF_TOKEN = document.querySelector('meta[name="csrf-token"]').getAttribute("content");
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone(".dropzone",{
maxFilesize: 3, // 3 mb
acceptedFiles: ".jpeg,.jpg,.png,.pdf",
});
myDropzone.on("sending", function(file, xhr, formData) {
formData.append("_token", CSRF_TOKEN);
});
</script>
</body>
</html>
That it’s! Now you can drag and drop file using Dropzone in laravel 9.
Run following command to start the server
php artisan serve
now open,
http://127.0.0.1:8000/
Step 5 : Conclusion
You need to pass the CSRF token to upload the file using Dropzone. For this require to explicitly initialize dropzone and pass the token. If you found this tutorial helpful then don’t forget to share.
Also Read : Fetch records from MySQL with jQuery AJAX – Laravel 9
[…] Also Read : Laravel 9 – Drag and Drop file upload using Dropzone […]
[…] Also Read : Laravel 9 – Drag and Drop file upload using Dropzone […]
[…] Also Read : Laravel 9 – Drag and Drop file upload using Dropzone […]
[…] Also Read : Laravel 9 – Drag and Drop file upload using Dropzone […]