Drag and drop multiple file upload with dropzone js in Laravel 10; In this tutorial, i am going to show you how to drag & drop multiple image upload with dropzone js in Laravel 10 applications.
DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews. It’s lightweight, doesn’t depend on any other library (like jQuery) and is highly customizable.
Laravel 10 Drag & Drop Multiple Image Upload wtih Dropzone JS Example
- Step 1 – Installing Laravel 10 Application
- Step 2 – Configuring Database Details
- Step 3 – Create Model & Migration
- Step 4- Create Routes
- Step 5 – Creating Dropzone Controller
- Step 6 – Creating Dropzone Image Blade View
- Step 7- Start Development Server
Step 1 – Installing Laravel 10 Application
Execute the following command on terminal to install Laravel 10 apps:
composer create-project --prefer-dist laravel/laravel demo
Step 2 – Configuring Database Details
Open your downloaded laravel app into any text editor. Then find .env file and configure database detail like following:
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=db name DB_USERNAME=db user name DB_PASSWORD=db password
Now, open again your terminal and type the following command on cmd to create tables into your selected database:
php artisan migrate
Step 3 – Create Model & Migration
Execute the following command on terminal to crate model and migration file:
php artisan make:model Photo -m
Then visit database/migrations/ directory. And create_photos_table.php file and 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();
});
}
Step 4 – Create Routes
Open your web.php file, which is located inside routes directory. Then add 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 – Creating Dropzone Controller
Create dropzone controller by using the following command:
php artisan make:controller DropzoneController
The above command will create DropzoneController.php file, which is located inside demo/app/Http/Controllers/ directory.
<?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]);
}
}
Step 6 – Creating Dropzone Image Blade View
Ceate new blade view file that named dropzone.blade.php inside resources/views directory and add the following code into it:
<!DOCTYPE html>
<html>
<head>
<title>Drag & Drop File Uploading using Laravel 10 Dropzone JS - laratutorials.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 10 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 – Start Development Server
Execute the following command to start development server for your laravel app:
php artisan serve
Then open your browser and fire the following url into your browser:
http://127.0.0.1:8000/dropzone
Conclusion
Drag and drop multiple file upload with dropzone js in Laravel 10; In this tutorial, you have learned how to drag & drop multiple image upload with dropzone js in Laravel 10 applications.