Laravel 5.5 - multiple images uploading using dropzone js

If you are planing to implement drag and drop multiple images upload using ajax in your laravel 5.5 application then you a right place. Here i will let you know how to upload multiple images upload using ajax.

If you think drag and drop images upload with ajax and it is easy then you are wrong. It is not easy to make drag and drop image upload. But if you are doing it using dropzone js then it's very easy.

Dropzone JS is a lightweight open source js library that provides drag and drop file uploads with image previews. Dropzone JS though we can easily implement by using js. So here i will show you simple example very quickly. So just follow bellow points and you will get layout like as bellow screenshot.


Create Routes:

In first point, i will tell you to add two route one for get verb and another for post verb. Get will be display form and POST will be upload image.


Route::get('dropzoneFileUpload','HomeController@dropzoneFileUpload') ;

Route::post('dropzoneFileUpload',array('as'=>'dropzone.fileupload','uses'=>'HomeController@dropzoneFileUploadPost')) ;

Create Controller Method:

Here, we require to add two controller method, dropzoneFileUpload() and dropzoneFileUploadPost() in your controller.

One thing is important is here write code of image upload and it store in "images" folder, so create images folder in your public directory.

So you can add those method in your any controller. So here i added it in HomeController.



namespace App\Http\Controllers;

use Illuminate\Http\Request;

class HomeController extends Controller


public function dropzoneFileUpload(){

return view('dropzoneFileUpload');


public function dropzoneFileUploadPost(Request $request){

$imageName = time().'.'.$request->file->getClientOriginalExtension();

$request->file->move(public_path('images'), $imageName);

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



Create View File:

In last step we have to simply create new blade file and write code of form layout and js code of dropsone js. So let's create it.


<!DOCTYPE html>

<html lang="en">


<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Laravel 5.5 - multiple images uploading using dropzone js</title>

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

<script src=""></script>



<h3>Laravel 5.5 - multiple images uploading using dropzone js</h3>

{!! Form::open([ 'route' => [ 'dropzone.fileupload' ], 'files' => true, 'class' => 'dropzone','id'=>"image-upload"]) !!}

{!! Form::close() !!}


<script type="text/javascript">

Dropzone.options.imageUpload = {

maxFilesize : 1,

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




Now you can simply run app and check it will work like charm.

I hope you found your best....

November 5, 2017 | 20946 Viewer | Category : PHPLaravelJQueryJQuery PluginAjaxLaravel 5Laravel 5.5
Related Posts