Simple Drag And Drop File Upload Using Dropzone JS

how to drag and drop upload multiple files in laravel 8 using dropzone js. Drag and drop file upload using dropzone js in your project. In this tutorial, you will learn, dropzone multiple files uploading using dropzone Js in laravel project. This post uploads multiple images in the drop zone plugin, without a refresh or reloads web page using dropzone js in laravel 8.

The drop zone is a jquery plugin, dropzone.js through you can select one by one image and also with preview. After choosing the image from browse, you can see a preview of the image. Drop zone also provides filters like validation for max upload, a specific image or file extension, etc.

we will create two routes, one of display dropzone image upload form view and another for the store images. Then, We create two methods on DropzoneController. We learn drag and drop image upload jquery.

PHP drag and drop file upload using drop zone. We will learn step by step on how to drag and drop multiple files upload in dropzone js. And then upload it to the folder and database.

Simple Drag And Drop File Upload Using Dropzone JS - Laravel 8

Step 1 – Download Laravel 8 Application

First of all, download or install laravel 8 new setup. So, open the terminal and type the following command to install laravel 8 in your machine:

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

Step 2 – Setup Database With App

Setup database with your downloaded/installed laravel 8 app. So, you need to find the .env file and setup database details as following:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database-name
DB_USERNAME=database-uname
DB_PASSWORD=database-pass

Step 3 – Create Model & Migration

In this step, open again your command prompt. And run the following command on it. To create a model and migration file for form see below:

php artisan make:model Photo -m

open create_photos_table.php file inside LaravelImage/database/migrations/ directory. And the update the function up() with the 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 – Create Routes

open the web.php file from the routes directory. And update the following routes into the web.php 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

Run the following command on command prompt to create a controller file:

php artisan make:controller DropzoneController

After that, go to app/http/controllers and open the 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]);
    }
    
}

Step 6 – Create Blade View

Now, create drag and drop multiple image file upload in drop zone form in blade view file to display the image upload form and submit to the database using dropzone js in laravel.

So, Go to resources/views and create dropzone.blade.php and update the following code into it:

<!DOCTYPE html>
<html>
<head>
    <title>Simple Drag And Drop File Upload Using Dropzone JS - phpcodingstuff.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 &amp; Drop File Uploading using Laravel 8 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 – Implement Javascript Code For Dropzone Configuration

You can add this code into the 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

Create images directory inside the 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

open the command prompt and run the following command to start the development server:

php artisan serve

Then open your browser and hit the following URL on it:

http://127.0.0.1:8000/dropzone

I hope it can help you...

Robert look

Author, Web Developer (Front-end & Back-end)

My Name is Robert look from New york, America. I'm a Web Application Developer with 6 years of experience. Currently, I'm working on front-end & back-end web development using popular web technology Languages. That's why I love to share my coding knowledge in a smart way.