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.

routes/web.php

Route::get('dropzone/example', '[email protected]');
Route::post('dropzone/store', '[email protected]')->name('dropzone.store');

Read Also: How To Validate Upload File Type Using Javascript

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.

<?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, we will create a blade file for viewing.

resources/views/dropzone_view.blade.php

<html>
<head>
    <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>
</head>
<body>
<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">
                @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>

Read Also: Laravel 8 CRUD Operation Example

Output:

dropzone_image_upload_example_in_laravel