Laravel 9 - Dropzone.js How to drag and drop / upload multiple images
Laravel 9 - Dropzone.js How to drag and drop / upload multiple images
In this tutorial, we’ll cover how to drag and drop or upload multiple images in Laravel 9 using Dropzone, making file uploads easier with a simple interface.
If you're a video person, feel free to skip the post and check out the video instead!
Step # 1 : Create fresh Laravel project or use an existing Laravel project.
Two commands to create fresh Laravel project.
Global Command : laravel new dropzone
Or use
Non Global Command : composer create-project laravel/laravel --prefer-dist dropzone
Step # 2 : Access the project.
Open a terminal (e.g., Git Bash) and navigate to your Laravel project's root folder.
Git Bash : cd c:xampp/htdocs/dropzone
Step # 3 : Create Model, Migration & Controller for images.
Command : php artisan make:model Image -cm
Step # 4 : Add columns to the images table.
Access create_images_table and update columns like below.
public function up(): void
{
Schema::create('images', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->timestamps();
});
}
If you are going to insert the data using form you need to define the fields as fillable property.
Access Image model and add protected $fillable columns in Image class.
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Image extends Model
{
use HasFactory;
protected $fillable = [
'name',
];
}
Run the migration.
Command : php artisan migrate.
Step # 5 : Create view named dropzone.blade.php.
(resources/views/dropzone.blade.php)
You need to include the HTML below, which includes the form and the Dropzone CDN.
<!DOCTYPE html>
<html>
<head>
<title>Laravel 9 Dropzone JS - Code Shotcut</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 mt-5">
<div class="col-md-12">
<h1>Laravel 9 Dropzone JS example - Code Shotcut</h1>
<form action="{{ url('/upload-images') }}" method="post" enctype="multipart/form-data" id="images" class="dropzone">
@csrf
<div>
<h4 class="text-center">Upload or Drag & Drop images</h4>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
Dropzone.autoDiscover = false;
var dropzone = new Dropzone('#images', {
thumbnailWidth: 200,
maxFilesize: 2,
paramName: "images[]",
acceptedFiles: ".jpeg,.jpg,.png,.gif",
error: function(file, errorMessage) {
errors = true;
},
queuecomplete: function() {
var count= dropzone.files.length;
if(count == 1){
setTimeout(function () {
dropzone.removeAllFiles();
alert("Image uploaded successfully");
}, 1000);
}else{
setTimeout(function () {
dropzone.removeAllFiles();
alert("Images uploaded successfully");
}, 1000);
}
}
});
</script>
</body>
</html>
Essential Fields:
enctype="multipart/form-data": Ensures that the form data, including file uploads, is properly encoded for submission.
Dropzone Setup: Since you're using Dropzone.js, there's no need to explicitly include an <input type="file"> field. Dropzone automatically handles file input through its drag-and-drop interface, which you’ve correctly set up using the class="dropzone" on the <form> tag.
The id="images" is used to manually initialize the Dropzone instance in JavaScript by targeting the specific form with Dropzone('#images')
Step # 6 : Create routes.
Import the ImageController class.
use App\Http\Controllers\ImageController;
Add routes.
Route::get('/upload', [ImageController::class, 'index']);
Route::post('/upload-images', [ImageController::class, 'store']);
Step # 7 : Create methods in the ImageController.
Access ImageController and create two methods one to display the form and the second to store images.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Image;
class ImageController extends Controller
{
public function index()
{
//Return view
return view('dropzone');
}
public function store(Request $request)
{
//Validate and upload images
$request->validate([
'images.*' => 'required|mimes:png,gif,jpg,bim|max:2048',
]);
if($request->images)
{
foreach ($request->images as $image) {
$modifiedImage = time() . ' - ' . $image->getClientOriginalName();
$image->move(public_path('/image'), $modifiedImage);
Image::create([
'name' => $modifiedImage,
]);
}
}
return back()->with('success', 'images uploaded successfully.');
}
}
Step # 8 : It's time to test.
Command : php artisan server
Visit url 127.0.0.1:8000/upload
Try uploading the images
Share this with friends!
To engage in commentary, kindly proceed by logging in or registering
Subscribe to Our Newsletter
Stay ahead of the curve! Join our newsletter to see what everyone’s talking about.
Continue with Google
0 Comments