Laravel 9 Drag and Drop File Upload using Dropzone JS

In this tutorial you will learn about the Laravel 9 Drag and Drop File Upload using Dropzone JS and its application with practical example.

In this Laravel 9 Drag and Drop File Upload using Dropzone JS Example tutorial, I will show you how to create drag and drop image file upload functionality using dropzone js in laravel 9. In this tutorial you will learn to implement drag and drop image file upload using dropzone package in laravel 9. In this article you will learn to upload multiple image file with drag and drop using dropzone js in laravel 9. After upload we will be saving image files with unique name in database.

Laravel 9 Drag and Drop File Upload using Dropzone JS

In this step by step tutorial I will demonstrate you with example to create drag and drop image file upload using dropzone js in laravel 9. Please follow the instruction given below:

  • Install Laravel 9
  • Setup Database with App
  • Create Model & Migration
  • Create Routes
  • Generate Controller By Artisan Command
  • Create Blade View
  • Implement javascript Code for Dropzone Configuration
  • Create Images Directory inside Public Directory
  • Run Development Server

Install Laravel 9

First of all we need to create a fresh laravel project, download and install Laravel 9 using the below command

Setup Database Credentials

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

Create Model & Migration

Now, in this step we will create model and migration file. Please run the following command:

Now, open create_photos_table.php file inside LaravelImage/database/migrations/ directory. And the update the function up() with following code:


Now, run the migration to create database table using following artisan command:

Create Routes

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

Generate Controller By Artisan Command

Now, lets create a controller named DropzoneController using command given below –

Now, go to app/http/controllers and open DropzoneController.php file. And put the following code into it:


The following line of code will upload an image into the images directory:

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. Go to resources/views and create dropzone.blade.php and update the following code into it:

Implement javascript Code for Dropzone Configuration

Create Images Directory inside Public Directory

Do remember to create images directory inside public directory.

Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

Now, open the following URL in browser to see the output –

In this tutorial we have learn about the Laravel 9 Drag and Drop File Upload using Dropzone JS and its application with practical example. I hope you will like this tutorial.