Posted by Arjun on Saturday 6th June 2015

How to use Dropzone Js with Laravel 5

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:

<script src="{{ asset('assets/js/dropzone.js') }}"></script>
<link rel="stylesheet" href="{{ asset('assets/css/dropzone.css') }}"> 

Install Dropzone on element

  <div class="container">
            <div class="dropzone" id="dropzoneFileUpload">
            </div>
        </div>


      <script type="text/javascript">
            var baseUrl = "{{ url('/') }}";
            var token = "{{ Session::getToken() }}";
            Dropzone.autoDiscover = false;
             var myDropzone = new Dropzone("div#dropzoneFileUpload", { 
                 url: baseUrl+"/dropzone/uploadFiles",
                 params: {
                    _token: token
                  }
             });
             Dropzone.options.myAwesomeDropzone = {
                paramName: "file", // The name that will be used to transfer the file
                maxFilesize: 2, // MB
                addRemoveLinks: true,
                accept: function(file, done) {
                  
                },
              };
         </script>

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

<!DOCTYPE html>
<html>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/min/dropzone.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="dropzone" id="dropzoneFileUpload">
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/dropzone.js"></script>

    <script type="text/javascript">
        var baseUrl = "{{ url('/') }}";
        var token = "{{ Session::getToken() }}";
        Dropzone.autoDiscover = false;
        var myDropzone = new Dropzone("div#dropzoneFileUpload", {
            url: baseUrl + "/dropzone/uploadFiles",
            params: {
                _token: token
            }
        });
        Dropzone.options.myAwesomeDropzone = {
            paramName: "file", // The name that will be used to transfer the file
            maxFilesize: 2, // MB
            addRemoveLinks: true,
            accept: function(file, done) {

            },
        };
    </script>
</body>
</html>

Create a controller to upload file to the server :

<?php

namespace App\Http\Controllers;

use App\Http\Controllers\Controller;
use Input;
use Validator;
use Request;
use Response;

class DropzoneController extends Controller {

    public function index() {
        return view('dropzone_demo');
    }

    public function uploadFiles() {

        $input = Input::all();

        $rules = array(
            'file' => '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', '[email protected]');
Route::post('dropzone/uploadFiles', '[email protected]');

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.