Laravel 9 Drag and Drop Image Upload Using Dropzone
Hello Artisan,
In this Laravel 9 dropzone image upload tutorial, I will show you step by step how we can upload a single image or multiple images in Laravel using dropzone. This article is focused on Laravel 9 drag and drop file upload using dropzone js.
If you don't know how to upload an image in Laravel 9 with dropzone then you are in the right place. You will see in this tutorial, Laravel 9 dropzone multiple files upload system. I will show you a fresh Laravel application so that you can copy and paste this code into your implemation.
I will help you to give an example of Laravel 9 dropzone image upload. You just need to follow some steps to do Laravel 9 dropzone file upload. You know that Dropzone.js is a jquery plugin, and in dropzone.js we can select one by one image and also with preview.
Step 1: Download Laravel 9
This step is optional; however, if you have not created the Laravel application, then you may go ahead and execute the below command:
composer create-project laravel/laravel example-app
Step 2: Create Controller
In this second step, now we should create a new controller like DropzoneController. In this controller, we will create two methods, one for return view dropzone image upload form and another for storing images.
All images will store on the "images" folder in a public folder. Let's update the following code to your controller file:
app/Http/Controllers/DropzoneController.php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class DropzoneController extends Controller
{
/**
* Generate Image upload View
*
* @return void
*/
public function index()
{
return view('dropzone');
}
/**
* Image Upload Code
*
* @return void
*/
public function store(Request $request)
{
$image = $request->file('file');
$imageName = time().'.'.$image->extension();
$image->move(public_path('images'),$imageName);
return response()->json(['success'=>$imageName]);
}
}
Read also: Laravel 9 Send Email Cron Job Task Scheduling Example
Step 3: Create Routes
In this step, we need to create a route for the layout file and another one for storing images. so open your "routes/web.php" file and add the following route.
routes/web.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::controller(DropzoneController::class)->group(function(){
Route::get('dropzone', 'index');
Route::post('dropzone/store', 'store')->name('dropzone.store');
});
Step 4: Create Blade File
In the last step, we have to create a dropzone.blade.php file in your resources directory. in this file I write code of image uploading using dropzone.js, so let's create a new blade file and put bellow code:
resources/views/dropzone.blade.php
Now all are set to go. So run php artisan serve command and test it.
Hope this image upload using the dropzone tutorial in Laravel 9 will help you.
