How to Drag and Drop Image Upload using Dropzone JS in Laravel 9?


Share:
 | Published By: Admin | Published On: Mar 03, 2022 | Category: Laravel 9

Hi dev,

Today, I am explain how to Drag and Drop Image Upload using Dropzone JS in Laravel 9?. In this tutorial, you will learn how to drag & drop multiple image upload with dropzone js in Laravel 9. In this concept of laravel 9 dropzone image file upload. This comprehensive Laravel 9 file uploading tutorial helps you create drag and drop files or image uploading using the Dropzone js plugin. Undoubtedly, it is lightweight, and most importantly, it doesn’t require an external library (such as jQuery). Throughout this tutorial, we'll show you by example how to use Dropzone.js in Laravel 9.

DropzoneJS is a popular and profound open-source library that allows you to drag ’n’ drop file uploads with image previews.

Let's see how to use Dropzone.js step by step with Laravel 9 to implement multiple file and image upload with progress bars and image previews.

Step 1: Download Laravel

Let us begin the tutorial by installing a new laravel application. if you have already created the project, then skip following step.

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.

php artisan make:controller DropzoneController

Let's update following code to your controller file:

app/Http/Controllers/DropzoneController.php
<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
 
class DropzoneController extends Controller
{
    /**
     * Generate Image upload View
     *
     * @return void
     */
    public function index()
    {
        return view('dropzone');
    }
      
    /**
     * Image Upload Code
     *
     * @return void
     */
    public function store(Request $request)
    {
        $image = $request->file('file');
     
        $imageName = time().'.'.$image->extension();
        $image->move(public_path('images'),$imageName);
     
        return response()->json(['success'=>$imageName]);
    }
}
Step 3: Create 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>How to Drag and Drop Image Upload using Dropzone JS in Laravel 9? - Mywebtuts.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">

            <h3 class="text-center">How to Drag and Drop Image Upload using Dropzone JS in Laravel 9? - Mywebtuts.com</h3>
    
            <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 steps have been done, now you have to type the given command and hit enter to run the laravel app:

php artisan serve

Now, you have to open web browser, type the given URL and view the app output:

http://localhost:8000/dropzone
Output:

I hope it can help you...

Share: