Drag and drop multiple image upload in Laravel 9 using dropzone js; Through this tutorial, we will learn how to drag & drop upload multiple images using dropzone js in Laravel 9 apps.
Dropzone.js is a jquery plugin, dropzone.js through you can select one by one image and also with a preview. After choosing an image from browse you can see a preview of the image. dropzone.js also provides filter like we can make validation for max upload, a specific image or file extension etc.
Laravel 9 Multiple Image Upload With Dropzone Js
Use the following steps to drag and drop multiple image file upload in Laravel 9 using dropzone js:
- Step 1 – Download Laravel 9 Application
- Step 2 – Setup Database with App
- Step 3 – Create Model & Migration
- Step 4 – Create Routes
- Step 5 – Generate Controller By Artisan Command
- Step 6 – Create Blade View
- Step 7 – Implement javascript Code for Dropzone Configuration
- Step 8 – Create Images Directory inside Public Directory
- Step 9 – Run Development Server
Step 1 – Download Laravel 9 Application
First of all, download or install laravel 9 new setup. So, open terminal and type the following command to install new laravel 9 app into your machine:
composer create-project --prefer-dist laravel/laravel blog
Step 2 – Setup Database with App
In this step, setup database with your downloded/installed laravel 9 app. So, you need to find .env file and setup database details as following:
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=database-name DB_USERNAME=database-user-name DB_PASSWORD=database-password
Step 3 – Create Model & Migration
In this step, open again your command prompt. And run the following command on it. To create model and migration file for form:
php artisan make:model Photo -m
After that, open create_photos_table.php file inside LaravelImage/database/migrations/ directory. And the update the function up() with following code:
public function up()
{
Schema::create('photos', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('path');
$table->timestamps();
});
}
Then, open again command prompt and run the following command to create tables into database:
php artisan migrate
Step 4 – Create Routes
In this step, open web.php file from routes direcotry. And update the following routes into web.php file:
<?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::get('dropzone', [DropzoneController::class, 'dropzone']);
Route::post('dropzone/store', [DropzoneController::class, 'dropzoneStore'])->name('dropzone.store');
Step 5 – Generate Controller By Artisan Command
In this step, run the following command on command prompt to create controller file:
php artisan make:controller DropzoneController
After that, go to app/http/controllers and open DropzoneController.php file. And update the following code into it:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class DropzoneController extends Controller
{
/**
* Generate Image upload View
*
* @return void
*/
public function dropzone()
{
return view('dropzone-view');
}
/**
* Image Upload Code
*
* @return void
*/
public function dropzoneStore(Request $request)
{
$image = $request->file('file');
$imageName = time().'.'.$image->extension();
$image->move(public_path('images'),$imageName);
return response()->json(['success'=>$imageName]);
}
}
The following line of code will upload an image into the images directory:
$image->move(public_path('images'),$imageName);
Step 6 – Create Blade View
Now, create drag and drop multiple image file upload form in blade view file to display image upload form and submit to the database using dropzone js in laravel 9.
So, Go to resources/views and create dropzone.blade.php and update the following code into it:
<!DOCTYPE html>
<html>
<head>
<title>Drag & Drop File Uploading using Laravel 9 Dropzone JS - Tutsmake.com</title>
<meta name="csrf-token" content="{{ csrf_token() }}" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<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>
</head>
<body>
<div class="container mt-2">
<div class="row">
<div class="col-md-12">
<h1 class="mt-2 mb-2">Drag & Drop File Uploading using Laravel 9 Dropzone JS</h1>
<form action="{{ route('dropzone.store') }}" method="post" enctype="multipart/form-data" id="image-upload" class="dropzone">
@csrf
<div>
<h3>Upload Multiple Image By Click On Box</h3>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
Dropzone.options.imageUpload = {
maxFilesize : 1,
acceptedFiles: ".jpeg,.jpg,.png,.gif"
};
</script>
</body>
</html>
Step 7 – Implement javascript Code for Dropzone Configuration
In this step, implement javascript code to configure dropzone js seetings.
You can add this code into blade view file:
<script type="text/javascript">
Dropzone.options.imageUpload = {
maxFilesize : 1,
acceptedFiles: ".jpeg,.jpg,.png,.gif"
};
</script>
Step 8 – Create Images Directory inside Public Directory
Now, create images directory inside public directory. Because the following line of code will upload an image into the images directory, which is located inside /public/ directory:
$image->move(public_path('images'),$imageName);Step 9 – Run Development Server
Last step, open command prompt and run the following command to start developement server:
php artisan serve
Then open your browser and hit the following url on it:
http://127.0.0.1:8000/dropzone
