Hello Devs,

In this tutorial, we are going to learn about laravel 7 dropzone example.

Follow this step by step guide given below:



Step 1 :


Install Laravel 

composer create-project --prefer-dist laravel/laravel blog



Step 2: 


Create Route routes/web.php

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



Step 3: 


Create Controller 

php artisan make:controller ImageController

app/Http/Controller/ImageController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ImageController extends Controller
{
    public function index()
    {
    	return view('image');
    }

    public function store(Request $request)
    {
    	$image = $request->file('file');
        $avatarName = $image->getClientOriginalName();
        $image->move(public_path('images'),$avatarName);
         
        $imageUpload = new Image();
        $imageUpload->filename = $avatarName;
        $imageUpload->save();
        return response()->json(['success'=>$avatarName]);
    }
}



Step 4: 


Create View File resources/views/image.blade.php

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>multiple image upload with dropzone.js in laravel 7 - Rathorji.in</title>
    <link rel="stylesheet" href="{{asset('css/app.css')}}">

 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> 
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.0/min/dropzone.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.0/dropzone.js"></script>
  </head>
  <body>
    <div class="container">
        <h2>Multiple Image Upload With dropzone.js In Laravel 7  - Rathorji.in</h2><br/>
        <form method="post" action="{{ route('dropzone.store') }}" enctype="multipart/form-data"
          class="dropzone" id="dropzone">
        @csrf
        </form>
    </div>
    <script type="text/javascript">
        Dropzone.options.dropzone =
        {
            maxFilesize: 10,
            renameFile: function (file) {
                var dt = new Date();
                var time = dt.getTime();
                return time + file.name;
            },
            acceptedFiles: ".jpeg,.jpg,.png,.gif",
            addRemoveLinks: true,
            timeout: 60000,
            success: function (file, response) {
                console.log(response);
            },
            error: function (file, response) {
                return false;
            }
        };
    </script>
  </body>
</html>


I hope this example helps you.