Laravel 10 Drag and Drop File Upload with Dropzone JS

Hello Friends,

In this quick example, let’s see laravel 10 drag and drop file upload dropzone js. In this article, we will implement a laravel 10 dropzone example. If you have a question about laravel 10 dropzone multiple files then I will give a simple example with a solution. This tutorial will give you a simple example of laravel 10 dropzone image upload. Alright, let’s dive into the steps.

Dropzone.js is a jquery plugin, dropzone.js we can select one by one images and also with a preview. After choosing an image from browse we can see a preview of the image. dropzone.js also provides a filter like we can make validation for max upload, a specific image or file extension, etc.

In this example, I create two routes, one for display view and another for store image. I also create two methods on DropzoneController and one blade file with dropzone js plugin js and CSS that way we can display the layout. You can implement it in your laravel application by following a few steps.

Step 1: Install Laravel 10

This is optional; however, if you have not created the laravel app, then you may go ahead and execute the below command:

composer create-project laravel/laravel example-app

Step 2: Create Controller

In this point, now we should create a new controller as DropzoneController. In this controller, we will add two methods, one for return view response and another for store images.

All images will store on the “images” folder in a public folder.

Let’s update following code to your controller file:

app/Http/Controllers/DropzoneController.php

<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
use Illuminate\View\View;
use Illuminate\Http\JsonResponse;
 
class DropzoneController extends Controller
{
    /**
     * Generate Image upload View
     *
     * @return void
     */
    public function index(): View
    {
        return view('dropzone');
    }
      
    /**
     * Image Upload Code
     *
     * @return void
     */
    public function store(Request $request): JsonResponse
    {
        $image = $request->file('file');
     
        $imageName = time().'.'.$image->extension();
        $image->move(public_path('images'),$imageName);
     
        return response()->json(['success'=>$imageName]);
    }
}

Step 3: Add Routes

In this is step we need to create route for datatables layout file and another one for store images. so open your “routes/web.php” file and add following route.

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::controller(DropzoneController::class)->group(function(){
    Route::get('dropzone', 'index');
    Route::post('dropzone/store', 'store')->name('dropzone.store');
});

Step 4: Add Blade File

At last step we have to create dropzone.blade.php file in your resources directory. in this file i write code of image uploading using dropzone.js, so let’s create new blade file and put bellow code:

resources/views/dropzone.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 10 Drag and Drop File Upload with Dropzone JS - ItSolutionStuff.com</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />
</head>
<body>
    
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1>Laravel 10 Drag and Drop File Upload with Dropzone JS - ItSolutionStuff.com</h1>
    
            <form action="{{ route('dropzone.store') }}" method="post" enctype="multipart/form-data" id="image-upload" class="dropzone">
                @csrf
                <div>
                    <h4>Upload Multiple Image By Click On Box</h4>
                </div>
            </form>
        </div>
    </div>
</div>
    
<script type="text/javascript">
  
        Dropzone.autoDiscover = false;
  
        var dropzone = new Dropzone('#image-upload', {
              thumbnailWidth: 200,
              maxFilesize: 1,
              acceptedFiles: ".jpeg,.jpg,.png,.gif"
            });
  
</script>
    
</body>
</html>

Run Laravel App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Laravel app:

php artisan serve

Now, Go to your web browser, type the given URL and view the app output:

http://localhost:8000/dropzone

Output:

I hope it can help you…