Drag and Drop File Upload Using Dropzone js in Laravel 8

Websolutionstuff | Oct-20-2020 | Categories : Laravel PHP jQuery

This article will show drag and drop file upload using dropzone js in laravel 8. DropzoneJS is an open-source library that provides drag and drop file uploads with image previews. Here, we will see the dropzone image upload tutorial in laravel 8. So, we will teach you laravel dropzone multiple files upload. 

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

So, let's see drag and drop multiple file uploads in laravel and drag and drop multiple file uploads in laravel 8 using dropzone js.

Laravel 8 Drag and Drop File Upload Using Dropzone

Step 1: Add Route

In this step, we will add routes in the web.php file

routes/web.php 

Route::get('dropzone/example', 'App\Http\Controllers\UserController@dropzoneExample');
Route::post('dropzone/store', 'App\Http\Controllers\UserController@dropzoneStore')->name('dropzone.store');

 

 

Step 2: Create Controller

Now, we will create a controller and add the below code for image upload.

Note: Create a new images folder in your public folder to save images.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\User;

class UserController extends Controller
{

    public function dropzoneExample()
    {
        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 For View

 Now, create a blade file for viewing.

resources/views/dropzone_view.blade.php

<html>
<head>
    <title>Drag and Drop File Upload Using Dropzone js in Laravel 8 - websolutionstuff.com</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>  
    <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>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1 class="text-center">Drag and Drop File Upload Using Dropzone js in Laravel 8 - websolutionstuff.com</h1><br>
            <form action="{{route('dropzone.store')}}" method="post" name="file" files="true" enctype="multipart/form-data" class="dropzone" id="image-upload">
                @csrf
                <div>
                <h3 class="text-center">Upload Multiple Images</h3>
            </div>    
            </form>
        </div>
    </div>
</div>
<script type="text/javascript">
        Dropzone.options.imageUpload = {
            maxFilesize: 1,
            acceptedFiles: ".jpeg,.jpg,.png,.gif"
        };
</script>
</body>
</html>

 

 

Output:

dropzone_image_upload_example_in_laravel_8

 


You might also like:

Recommended Post
Featured Post
How to Send Bulk Mail Using Queue in Laravel 9
How to Send Bulk Mail Using Qu...

In this article, we will see how to send bulk mail using queue in laravel 9. Laravel queue is used for sending bulk...

Read More

Mar-15-2022

How To Live Search In Laravel 9 Using Meilisearch
How To Live Search In Laravel...

In this article, we will see how to live search in laravel 9 using Meilisearch. Here we will learn live search in l...

Read More

Dec-13-2022

How To Integrate Razorpay Payment Gateway In Laravel 9
How To Integrate Razorpay Paym...

In this article, we see how to integrate razorpay payment gateway in laravel 9. As you all know if you are developi...

Read More

Apr-11-2022

How to Downgrade PHP 8.2 to 8.1 in Ubuntu
How to Downgrade PHP 8.2 to 8....

Hey there, I recently found myself in a situation where I needed to downgrade my PHP version from 8.2 to 8.1 on my Ubunt...

Read More

Nov-01-2023