DEV Community

devcse
devcse

Posted on • Originally published at codesnipeet.com

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,

Read Also: Google Recaptcha V3 Example Tutorial in Laravel 8

Route::get('dropzone', [DropzoneController::class, 'dropzone']);

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

Enter fullscreen mode Exit fullscreen mode

Step 2: Create Controller
Create DropzoneController controller

php artisan make:controller DropzoneController

Enter fullscreen mode Exit fullscreen mode

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

}

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

Discussion (0)