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', '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.

<?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>

 

 

Output:

dropzone_image_upload_example_in_laravel

 


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

Jul-26-2023

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

Aug-24-2020

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

Jun-10-2022

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

May-17-2021