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:


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();
        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.


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', 'index');
    Route::post('dropzone/store', 'store')->name('');


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:



Now all are set to go. So run php artisan serve command and test it.


Read also:Laravel 9 Autocomplete Search Example using Ajax


Hope this image upload using the dropzone tutorial in Laravel 9 will help you.


Facebook Github
A web enthusiastic, a self-motivated full-stack software engineer from Dhaka, Bangladesh with experience in developing applications using Laravel , React and Vue js