Laravel 9 Drag and Drop File Upload with Dropzone JS

By Hardik Savani December 3, 2024 Category : Laravel

Hello Dev,

This article is focused on laravel 9 drag and drop file upload dropzone js. if you want to see an example of laravel 9 dropzone example then you are in the right place. you can see laravel 9 dropzone multiple files. we will help you to give an example of laravel 9 dropzone image upload. You just need to some steps to do laravel 9 dropzone file upload.

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

In this example i create two route, 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 in your laravel application by following few steps.

Step 1: Install Laravel 9

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;
 
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]);
    }
}

Read Also: Laravel 9 Form Validation Tutorial Example

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 9 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 9 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:

Read Also: Laravel 9 Autocomplete Search with Select2 JS Example
http://localhost:8000/dropzone

Output:

Output:

I hope it can help you...

Tags :
Previous

Laravel 9 Autocomplete Search with Select2 JS Example
Next

How to Get Last Executed Query in Laravel 9?

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares