Laravel 10/9 Drag & Drop Multiple Image Upload wtih Dropzone JS Example

Drag and drop multiple file upload with dropzone js in Laravel 10/9; In this tutorial, i am going to show you how to drag & drop multiple image upload with dropzone js in Laravel 10/9 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.

Laravel 10/9 Drag & Drop Multiple Image Upload wtih Dropzone JS Example

Step 1 – Installing Laravel 10/9 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 10/9 Application

Execute the following command on terminal to install Laravel 10/9 apps:

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

Step 2 – Configuring Database Details

Open your downloaded laravel 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

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

php artisan migrate

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

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 10/9 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 10/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>

Step 7 – Start Development Server

Execute the following command to start development server for your laravel 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 10/9; In this tutorial, you have learned how to drag & drop multiple image upload with dropzone js in Laravel 10/9 applications.

Laravel 10/9 Drag & Drop Multiple Image Upload wtih Dropzone JS Example