Drag & Drop File Upload in Laravel 8.0 using Dropzone JS

In this article, 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,

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 REST API Authentication with Sanctum

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

Blog

Drag & Drop File Upload in Laravel 8.0 using Dropzone JS

devcse

Join Our Newsletter. No Spam, Only the good stuff.

Related