If you want to upload single or multiple images and files by drag and drop with preview. So for this, you will have to use dropzone js. Which is JavaScript lightweight library and it’s totally free. You can upload single and multiple files and images by dragging and dropping with preview in laravel web apps with dropzone js.
In this tutorial, you will learn how to drag & drop single or multiple image files to upload with dropzone js in Laravel 10.
How to Drag and Drop Multiple Image File Upload in Laravel 10 using dropzone.js
By using the following steps, you can drag and drop single or multiple image file upload into the Mysql database in laravel 10 apps using dropzone js:
- Step 1 – Create New Laravel 10 Project
- Step 2 – Setup Database with Project
- Step 3 – Create Model & Migration
- Step 4 – Define Routes
- Step 5 – Generate Controller By Artisan Command
- Step 6 – Create Blade View
- Step 7 – Setup Dropzone JS
- Step 8 – Create Images Directory inside Public Directory
- Step 9 – Run Development Server
Step 1 – Create New Laravel 10 Project
Firstly, open your terminal to download or install Laravel 10 new setup. Then execute the following commands in it to install the new Laravel 10 app on your system:
composer create-project --prefer-dist laravel/laravel LaravelImage
Step 2 – Setup Database with Project
In this step, Configure database with your apps. So, visit your app root directory and find .env file. Then configure database details as follows:
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 or terminal. And execute 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 – Define Routes
In this step, Visit your routes directory and open web.php file in any text editor. And add the following routes into web.php route 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, execute the following command on terminal/command prompt/command line to create controller file for your laravel applications; is as follow:
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 10.
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 10 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 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 – Setup Dropzone JS
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
Finally, Open the command prompt or terminal and run the following command to start development server:
php artisan serve
Then open your browser and hit the following url on it:
http://127.0.0.1:8000/dropzone
