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 Avoid TokenMismatchException On Logout
How To Avoid TokenMismatchExce...

Many times we faced a Tokenmismatch error in laravel. This error occurs If you stay too long time on one form...

Read More


How To Install Moment.js In Angular 15
How To Install Moment.js In An...

Welcome to this step-by-step guide on installing Moment.js in your Angular 15 project. As an Angular developer, I unders...

Read More


How To Install Vue 3 In Laravel 9 With Vite
How To Install Vue 3 In Larave...

In this article, we will see how to install Vue 3 in laravel 9 with vite. In the previous article, we will install...

Read More


Laravel 9 MongoDB CRUD Operation Tutorial
Laravel 9 MongoDB CRUD Operati...

In this article, we will see the laravel 9 MongoDB crud operation tutorial. In laravel, we will have many crud operation...

Read More