How to Upload Image in Laravel Using Dropzone?

Spread the love

Hellow Buddies,

In this tutorial, I’m going to show an example of loading Laravel 7/6 images using Dropzone. You can tilt multiple loads with dropzone.js in Laravel 7/6. We can drag and drop uploading files with dropzone js in laravel 7/6.

You can follow the upload of multiple Dropzone files step-by-step using the Laravel 6 application example.

Dropzone.js is a jquery plugin. Via dropzone.js we can select one by image and also with a preview. After selecting the image to search, a preview of the image will be displayed. dropzone.js also provides a filter as we can do the validation for maximum usage, specific image or file extensions, etc.

In this example I am creating two paths, one for the display view and one for the business image. I also create two methods in HomeController and a blade file with Dropzone JS plugin JS and CSS so we can show the layout. You can implement Laravel in your application by following a few steps.

After you’ve successfully run this example, you can preview it at the bottom of your application.

Step 1: add a route

The first step is to add two new routes, one to display the view and one to save the image in our route.php file. So open your path file and add two new paths below.

routes/web.php


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

Step 2: create the controller

In this step we are going to add two methods in DropzoneController so that we can process two routes of image upload code. If you haven’t created the DropzoneController yet, create a new one as shown below or add two methods.

You will also need to create a new picture folder in your public folder to save the picture.

app/Http/Controllers/DropzoneController.php

<?php
   
namespace App\Http\Controllers;
   
use App\Http\Requests;
use Illuminate\Http\Request;
   
class DropzoneController extends Controller
{
   
    /**
     * Generate Image upload View
     *
     * @return void
     */
    public function dropzone()
    {
        return view('dropzone-view');
    }
    
    /**
     * Image Upload Code
     *
     * @return void
     */
    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 the blade file

In the final step, we need to create the dropzone-view.blade.php file in your resource directory. In this file I write the image loading code with dropzone.js. So let’s create a new blade file and enter the following code:

resources/views/dropzone-view.blade.php


<!DOCTYPE html>
<html>
<head>
    <title>Upload Multiple Images using dropzone.js and Laravel</title>
    <script src="http://demo.itsolutionstuff.com/plugin/jquery.js"></script>
    <link rel="stylesheet" href="http://demo.itsolutionstuff.com/plugin/bootstrap-3.min.css">
    <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>Upload Multiple Images using dropzone.js and Laravel</h1>
            {!! Form::open([ 'route' => [ 'dropzone.store' ], 'files' => true, 'enctype' => 'multipart/form-data', 'class' => 'dropzone', 'id' => 'image-upload' ]) !!}
            <div>
                <h3>Upload Multiple Image By Click On Box</h3>
            </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>


<script type="text/javascript">
        Dropzone.options.imageUpload = {
            maxFilesize         :       1,
            acceptedFiles: ".jpeg,.jpg,.png,.gif"
        };
</script>


</body>
</html>

I hope this tutorial could help you …


thaaaank’s Buddies ….