Dropzone Image Upload Tutorial In Laravel 6/7

Websolutionstuff | Sep-21-2020 | Categories : Laravel PHP jQuery

In this article, we will see dropzone image upload in laravel 6/7. To upload images and files we will use dropzone.js. DropzoneJS is an open-source library that provides drag-and-drop file uploads with image previews. Here, we will upload multiple images using dropzone in laravel 6/7/8. So we will see a dropzone file upload in laravel on 6/7/8.

So, let's see laravel image upload in laravel using dropzone, dropzone multiple image upload laravel, laravel drag and drop file upload, and multiple file upload in laravel 6/7.

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 make validation for max upload, a specific image or file extension, etc.

Laravel 6/7 Image Upload Using Dropzone

I have added a few steps for drag and drop image files in laravel.

Step 1: Add Route

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


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



Step 2: Create Controller

In this step, we will create a controller and add a piece of code.

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


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();
        return response()->json(['success'=>$imageName]);


Step 3: Add Blade File For View

 Now, we will create a blade file for viewing.


    <title>Dropzone Image Upload Example in Laravel - 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>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1 class="text-center">Dropzone Image Upload Example in Laravel - websolutionstuff.com</h1><br>
            <form action="{{route('dropzone.store')}}" method="post" name="file" files="true" enctype="multipart/form-data" class="dropzone" id="image-upload">
                <h3 class="text-center">Upload Multiple Images</h3>
<script type="text/javascript">
        Dropzone.options.imageUpload = {
            maxFilesize: 1,
            acceptedFiles: ".jpeg,.jpg,.png,.gif"






You might also like:

Recommended Post
Featured Post
How To Render Charts In React: using react-chartjs-2 and Chart.js
How To Render Charts In React:...

​​React is a really cool tool that helps programmers make awesome user interfaces using JavaScript.  When it com...

Read More


Disable Sorting On Specific Columns In Datatable
Disable Sorting On Specific Co...

In this article, we will delve into the process of disabling sorting for specific columns in Datatables. If you find the...

Read More


Bootstrap Modal In Angular 13
Bootstrap Modal In Angular 13

In this article, we will see the bootstrap modal in angular 13. Ng Bootstrap is developed from bootstrap and they p...

Read More


Bootstrap Daterangepicker Example
Bootstrap Daterangepicker Exam...

In this small tutorial i will show you how to implement bootstrap daterangepicker example, bootstrap date rang...

Read More