Laravel 6 Dropzone Image Upload Tutorial

Laravel 6 Dropzone Image Upload Tutorial

In this tutorial, i will show example of Laravel 6 image upload using Dropzone. You can lean multiple upload using dropzone.js in Laravel 6\. We can drag and drop file upload using dropzone js in Laravel 6. You can follow step by step dropzone...

In this tutorial, i will show example of Laravel 6 image upload using Dropzone. You can lean multiple upload using dropzone.js in Laravel 6. We can drag and drop file upload using dropzone js in Laravel 6.

You can follow step by step dropzone multiple files upload with Laravel 6 application example.

Dropzone.js is a jquery plugin, dropzone.js through we can select one by one image and also with preview. After choose image from browse we can see preview of image. dropzone.js also provide filter like we can make validation for max upload, specific image or file extension etc.

In this example i create two route, one for display view and another for store image. i also create two method on HomeController and one blade file with dropzone js plugin js and css that way we can display layout. You can implement in your laravel application by following few step.

Step 1: Add Route

In first step, we will add two new route one for display view and another for store image in our routes.php file. So, open your route file and add bellow two new routes.

routes/web.php

Route::get('dropzone', '[email protected]');

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

Step 2: Create Controller

In this step we will add two method on DropzoneController that way we can handle two route with image upload code. So, if you haven't created DropzoneController then create new as bellow, or add two method.

You have to also create new images folder in your public folder for store image.

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]);

    }



}

Read Also: Laravel 6 Image Upload Tutorial

Step 3: Add Blade File

At last step we have to create dropzone-view.blade.php file in your resources directory. in this file i write code of image uploading using dropzone.js, so let's create new blade file and put bellow 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>

You can get more information about Dropzone.js from here : Click Here.

I hope it can help you...

Laravel Image

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Laravel 7/6 Image Validation

Laravel image validation. Here you will learn how to validate image mime type, size, and dimension in laravel app before uploading image to DB and folder.

Laravel 7/6 Image Upload Example Tutorial

Laravel 7/6 image upload example tutorial. Here we will show you, how to upload image in laravel 7/6 with preview and validation in laravel.

Image Validation In Laravel 7

Laravel image validation. Here you will learn how to validate image mime type, size, and dimension in laravel app before uploading image to DB and folder.

Crop and Resize Image Before Upload In Laravel Using with jQuery Copper JS

Crop image before upload in laravel. Here, we will show how to crop image before upload in DB & folder using jquery cropper js in laravel.

Laravel 7 Multiple Image Upload with Preview

laravel 7 ajax multiple image upload with preview example. Here you will learn how to upload multiple images using ajax with preview in laravel apps.