Laravel 7/6 multiple image upload using dropzone

Admin   Laravel   148  2021-03-17 01:50:06

Hii Guys,

In this tutorial, I will learn you how to multiple image upload using dropzone in laravel 7/6 .you can easy and simply to upload image using dropzone js in laravel 7/6.

This tutorial shows you things step by step for uploading the images using dropzone in laravel 7/6.

step 1:- Setup Laravel Project

Bellow command used to you can install Laravel 7/6 project.


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

step 2:- configure this database in the .env file.

After you can configure your database in .env file and change the database name, username, password in the .env file.








step 3:- Create Controller

you can create to controller in your project.This command is use to define in your terminal that create to controller,model and migration automatically.


php artisan make:controller ImageController -a

step 4:- Create Route

Add route in your route file.



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

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

step 5:- Add Method In Controller

Now, you can write this code in controller file.




namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Image;

class ImageController extends Controller


public function index()


return view('image');


public function store(Request $request)


$image = $request->file('file');

$avatarName = $image->getClientOriginalName();


$imageUpload = new Image();

$imageUpload->filename = $avatarName;


return response()->json(['success'=>$avatarName]);



step 6:- Create Route

Add route in your route file.


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

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

step 7:- Create View File

Now, you will Create view file.



<!DOCTYPE html>



<meta charset="utf-8">

<title>Laravel 7/6 multiple image upload using dropzone - </title>

<link rel="stylesheet" href="{{asset('css/app.css')}}">

<link rel="stylesheet" href="">

<script src=""></script>

<script src=""></script>

<script src=""></script>

<link rel="stylesheet" href="">

<script src=""></script>



<div class="container">

<h2>Laravel 7/6 multiple image upload using dropzone - </h2><br/>

<form method="post" action="{{ route('') }}" enctype="multipart/form-data"

class="dropzone" id="dropzone">




<script type="text/javascript">

Dropzone.options.dropzone =


maxFilesize: 10,

renameFile: function (file) {

var dt = new Date();

var time = dt.getTime();

return time +;


acceptedFiles: ".jpeg,.jpg,.png,.gif",

addRemoveLinks: true,

timeout: 60000,

success: function (file, response) {



error: function (file, response) {

return false;






It will help you....