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.

Table Of Contents−

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

composer create-project --prefer-dist laravel/laravel LaravelImage

1	composer create-project --prefer-dist laravel/laravel LaravelImage

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.

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

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

Create Model & Migration

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

php artisan make:model Photo -m

1	php artisan make:model Photo -m

Now, 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();
        });
    }

public function up()

{

Schema::create('photos', function (Blueprint $table) {

$table->id();

$table->string('name');

$table->string('path');

$table->timestamps();

});

}

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

php artisan migrate

1	php artisan migrate

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

<?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');

<?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');

Generate Controller By Artisan Command

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

php artisan make:controller DropzoneController

1	php artisan make:controller DropzoneController

Now, go to app/http/controllers and open DropzoneController.php file. And put 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]);
    }
    
}

<?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);

1	$image->move(public_path('images'),$imageName);

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:

<!DOCTYPE html>
<html>
<head>
    <title>Drag & Drop File Uploading using Laravel 9 Dropzone JS</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 9 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>

<!DOCTYPE html>

<html>

<head>

<title>Drag & Drop File Uploading using Laravel 9 Dropzone JS</title>

</head>

<body>

<h1 class="mt-2 mb-2">Drag & Drop File Uploading using Laravel 9 Dropzone JS</h1>

@csrf

<div>

<h3>Upload Multiple Image By Click On Box</h3>

</div>

</form>

</div>

Dropzone.options.imageUpload = {

maxFilesize : 1,

acceptedFiles: ".jpeg,.jpg,.png,.gif"

};

</script>

</body>

</html>

Implement javascript Code for Dropzone Configuration

<script type="text/javascript">
        Dropzone.options.imageUpload = {
            maxFilesize         :       1,
            acceptedFiles: ".jpeg,.jpg,.png,.gif"
        };
</script>

Dropzone.options.imageUpload = {

maxFilesize : 1,

acceptedFiles: ".jpeg,.jpg,.png,.gif"

};

</script>

Create Images Directory inside Public Directory

Do remember to create images directory inside public directory.

$image->move(public_path('images'),$imageName);

1	$image->move(public_path('images'),$imageName);

Run Development Server

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

php artisan serve

1	php artisan serve

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

http://127.0.0.1:8000/dropzone

1	http://127.0.0.1:8000/dropzone

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Laravel 9 Drag and Drop File Upload using Dropzone JS