How to use Dropzone Js with Laravel 5

Last updated on March 29, 2016

In this post I would like to show you, how to upload files with drag and drop interface with dropzone.js in your Laravel/Laravel5 applications.

Dropzone Js

DropzoneJS is an open source library that provides drag`n`drop file uploads with image previews. It’s lightweight, doesn’t depend on any other library (like jQuery) and is highly customizable. Dropzone does not handle your file uploads on the server. You have to implement the code to receive and store the file yourself.

Dropzone Js with Laravel 5

Download dropzone.js from https://github.com/enyo/dropzone, extract the zip copy all files from download folder, and place it in your public/assets or public/resources folder.

Include the DropzoneJS files

Include the DropzoneJS javascript and CSS files in your view:

Install Dropzone on element

Complete view file (resources\views\dropzone_demo.blade.php):

Create a controller to upload file to the server :

 'image|max:3000',
        );

        $validation = Validator::make($input, $rules);

        if ($validation->fails()) {
            return Response::make($validation->errors->first(), 400);
        }

        $destinationPath = 'uploads'; // upload path
        $extension = Input::file('file')->getClientOriginalExtension(); // getting file extension
        $fileName = rand(11111, 99999) . '.' . $extension; // renameing image
        $upload_success = Input::file('file')->move($destinationPath, $fileName); // uploading file to given path

        if ($upload_success) {
            return Response::json('success', 200);
        } else {
            return Response::json('error', 400);
        }
    }

}

Routes

controller must be registered in the Routes

Route::get('dropzone', 'DropzoneController@index');
Route::post('dropzone/uploadFiles', 'DropzoneController@uploadFiles');

NOTE: Make sure you have to create a folder called “uploads” in the public
folder because we are sending uploaded file to uploads directory.

Browser support

Chrome 7+
Firefox 4+
IE 10+
Opera 12+ (Version 12 for MacOS is disabled because their API is buggy)
Safari 6+

For all the other browsers, dropzone provides an old school file input fallback.

That’s it.