Dropzone JS: How To Drag And Drop File Upload In Laravel

By:
On:
In: Laravel
Tagged: , , , ,
With: 0 Comments

Hello Geek, This article focuses on the drag and drop file upload dropzone js in Laravel 9. If you’re looking for a Laravel 9 dropzone example, you’ve come to the right place. You can see multiple files in laravel 9 dropzone. We will assist you in providing an example of a laravel 9 dropzone image upload. You only need to follow a few steps to upload a file to a dropzone in Laravel 9.

Dropzone.js is a jquery plugin that allows us to select images one by one and also with a preview. We can see a preview of the image after selecting it from the browse. Dropzone.js also includes filters, such as the ability to validate for a maximum upload, a specific image or file extension, and so on.

In this example, I create two routes: one for displaying the view and one for storing the image. I also created two DropzoneController methods and one blade file with dropzone js plugin js and css so that we could display the layout. You can incorporate it into your Laravel application by taking a few steps.

Step 1: Install Laravel

This is optional; however, if you have not yet created the laravel app, you may proceed with the following command:

composer create-project laravel/laravel example-app

Step 2: Create Controller

Now is the time to create a new controller called DropzoneController. We’ll add two methods to this controller: one for returning view responses and another for storing images.

All images will be saved in a public folder under the “images” folder.

Let’s add this code to your controller file:

<?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: Add Routes

In this step, we must create a route for the datatables layout file and another for the store images. So, open your “routes/web.php” file and add the route below.

<?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

Finally, we must create the dropzone.blade.php file in your resources directory. In this file, I write image uploading code using dropzone.js, so let’s make a new blade file and paste the following code:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 9 Drag and Drop File Upload with Dropzone JS - aboutthenerd.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 - aboutthenerd.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

Leave a Reply