Drag & Drop Multiple Image Upload in Laravel 8

Drag and drop multiple file upload with dropzone js in laravel 8; In this tutorial, i will guide you from scratch on how to drag & drop multiple image upload with dropzone js in Laravel 8 applications.

DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews. It’s lightweight, doesn’t depend on any other library (like jQuery) and is highly customizable.

This laravel 8 drag and drop multiple image/file upload example, i will create two routes, one view file for display multiple image upload form and create DropzoneController in laravel 8 apps.

Laravel 8 Drag & Drop Multiple Image Upload wtih Dropzone JS Example

Step 1 - Installing Laravel 8 Application
Step 2 - Configuring Database Details
Step 3 - Create Model & Migration
Step 4- Create Routes
Step 5 - Creating Dropzone Controller
Step 6 - Creating Dropzone Image Blade View
Step 7- Start Development Server

Step 1 - Installing Laravel 8 Application

Execute the following command on terminal to install laravel 8 apps:

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

Step 2 - Configuring Database Details

Open your downloaded laravel 8 app into any text editor. Then find .env file and configure database detail like following:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db name
DB_USERNAME=db user name
DB_PASSWORD=db password

Recommended:-Laravel 8 Image Upload Tutorial

Now, open again your terminal and type the following command on cmd to create tables into your selected database:

php artisan migrate

Recommended:-Laravel 8 Ajax Image Upload Preview

Step 3 - Create Model & Migration

Execute the following command on terminal to crate model and migration file:

php artisan make:model Photo -m

Then visit database/migrations/ directory. And create_photos_table.php file and 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();
        });
    }

Step 4 - Create Routes

Open your web.php file, which is located inside routes directory. Then add the following routes into 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');

Recommended:-Laravel 8 Multiple Image Upload Example

Step 5 - Creating Dropzone Controller

Create dropzone controller by using the following command:

php artisan make:controller DropzoneController

The above command will create DropzoneController.php file, which is located inside demo/app/Http/Controllers/ directory.

<?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 - Creating Dropzone Image Blade View

Ceate new blade view file that named dropzone.blade.php inside resources/views directory and add the following code into it:

<!DOCTYPE html>
<html>
<head>
    <title>Drag & Drop File Uploading using Laravel 8 Dropzone JS - laratutorials.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 & 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 - Start Development Server

Execute the following command to start development server for your laravel 8 app:

php artisan serve

Then open your browser and fire the following url into your browser:

http://127.0.0.1:8000/dropzone

Conclusion

Drag and drop multiple file upload with dropzone js in laravel 8; In this tutorial, you have learned how to drag & drop multiple image upload with dropzone js in Laravel 8 applications.