Drag & Drop File Upload in Laravel 8.0 using Dropzone JS

In this page, I will show you how to drag and drop file in laravel 8.0. Drag and drop in laravel is very simple. In this post, you will learn uploading multiple files just drag and drop using dropzone. You will learn to Drag and drop files upload in laravel.

Dropzone.js is a jquery plugin, dropzone.js through we can select one by one image and also with preview. After choosing the image from browse, we can see the preview of the image. dropzone.js also provide filters like we can make validation for max upload, a specific image or file extension, etc.Using this dropzone plugin You will learn to Drag and drop files upload in laravel easily.

Step 1: Add Route

We added two routes, first one is for displayinh the page and second one is for uploading the files. lest do it,

Read also: Laravel 8.0 PDF | Laravel 8.0 Generate PDF File example
routes/web.php
Route::get('dropzone', [DropzoneController::class, 'dropzone']);

Route::post('dropzone/store', [DropzoneController::class, 'dropzoneStore'])->name('dropzone.store');

Step 2: Create Controller

Create DropzoneController controller

php artisan make:controller DropzoneController

app/Http/Controllers/DropzoneController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class DropzoneController extends Controller
{
    public function dropzone()
    {
        return view('dropzone-view');
    }

    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 3: Add Blade File

Read also: Laravel 8.0 Socialite Login with Google Account Example
resources/views/dropzone-view.blade.php
<!DOCTYPE html>

<html>

<head>

    <title>Drag & Drop File Upload in Laravel 8 using Dropzone JS</title>

    <link rel="stylesheet" href="http://demo.itsolutionstuff.com/plugin/bootstrap-3.min.css">

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

    <style>
        .dropzone {
            background-color: #4a5568;
            border-radius: 50px;
            color: #fff;
        }
    </style>
</head>

<body>



<div class="container">

    <div class="row">

        <div class="col-md-12">

            <h1>Drag & Drop File Upload in Laravel 8 using Dropzone JS</h1>



            <form action="{{ route('dropzone.store') }}" method="post" enctype="multipart/form-data" id="image-upload" class="dropzone">

                @csrf

                <div>


                </div>

            </form>

        </div>

    </div>

</div>



<script type="text/javascript">

    Dropzone.options.imageUpload = {

        maxFilesize         :       1,

        acceptedFiles: ".jpeg,.jpg,.png,.gif"

    };

</script>



</body>

</html>
Read official doc Dropzone.js from here : Click Here.

Output

output

hope it will helps you!

Tags: