DropzoneJS with Laravel

In this Tutorial, We will learn how to integrate dropzone-js with Laravel. 

Add Bootstrap - jQuery - Dropzone (CSS and JS) file .

CSS File :-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/min/dropzone.min.css">
Javascript File :-
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/min/dropzone.min.js"></script>
Create our Dropzone html element, Below we have created our own "preview-temaplte" check the div with "previews" id.
<div class="container">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div class="panel panel-default">
                <div class="panel-heading">Upload</div>
                <div class="panel-body">
                    <div id="actions" class="row">
                        <div class="col-lg-7">
                            <span class="btn btn-success fileinput-button">
                                <i class="glyphicon glyphicon-plus"></i>
                                <span>Add files...</span>
                            </span>
                            <button type="submit" class="btn btn-primary start">
                                <i class="glyphicon glyphicon-upload"></i>
                                <span>Start upload</span>
                            </button>
                            <button type="reset" class="btn btn-warning cancel">
                                <i class="glyphicon glyphicon-ban-circle"></i>
                                <span>Cancel upload</span>
                            </button>
                        </div>
                        <div class="col-lg-5">
                            <span class="fileupload-process">
                              <div id="total-progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                                  <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
                              </div>
                            </span>
                        </div>
                    </div>

                    <div class="table table-striped" class="files" id="previews">
                        <div id="template" class="file-row">
                            <div>
                                <span class="preview"><img data-dz-thumbnail /></span>
                            </div>
                            <div>
                                <p class="name" data-dz-name></p>
                                <strong class="error text-danger" data-dz-errormessage></strong>
                            </div>
                            <div>
                                <p class="size" data-dz-size></p>
                                <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                                    <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
                                </div>
                            </div>
                            <div>
                                <button class="btn btn-primary start">
                                    <i class="glyphicon glyphicon-upload"></i>
                                    <span>Start</span>
                                </button>
                                <button data-dz-remove class="btn btn-warning cancel">
                                    <i class="glyphicon glyphicon-ban-circle"></i>
                                    <span>Cancel</span>
                                </button>
                                <button data-dz-remove class="btn btn-danger delete">
                                    <i class="glyphicon glyphicon-trash"></i>
                                    <span>Delete</span>
                                </button>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
Some CSS for our table, preview and action class and id.
#actions {
            margin: 2em 0;
        }
        #actions .start , #actions .cancel { display: none; }
        div.table {
            display: table;
        }
        div.table .file-row {
            display: table-row;
        }
        div.table .file-row > div {
            display: table-cell;
            vertical-align: top;
            border-top: 1px solid #3c3c3c;
            padding: 8px;
        }
        div.table .file-row:nth-child(odd) {
            background: #3c3c3c;
        }
        #total-progress {
            opacity: 0;
            transition: opacity 0.3s linear;
        }
        #previews .file-row.dz-success .progress {
            opacity: 0;
            transition: opacity 0.3s linear;
        }
        #previews .file-row .delete {
            display: none;
        }
        #previews .file-row.dz-success .start,
        #previews .file-row.dz-success .cancel {
            display: none;
        }
        #previews .file-row.dz-success .delete {
            display: block;
        }
Our Javascript Code for Dropzone :-
var baseUrl = "http://example.com";
        var token = ''; // Add your csrf_token like {{ csrf_field() }}

        var previewNode = document.querySelector("#template");
        previewNode.id = "";

        var previewTemplate = previewNode.parentNode.innerHTML;
        previewNode.parentNode.removeChild(previewNode);

        var fileList = new Array;
        var i =0;

        var myDropzone = new Dropzone(document.body, {
            url: baseUrl+"/upload/files",
            params: { _token: token },
            paramName: "file",
            acceptedFiles : "image/*",
            thumbnailWidth: 80,
            thumbnailHeight: 80,
            parallelUploads: 1,
            maxFilesize: 5,   // This is 5 MB
            previewTemplate: previewTemplate,
            autoQueue: false,
            dictFileTooBig: 'Oh! Snap file is big - Baba!',
            previewsContainer: "#previews",
            clickable: ".fileinput-button",
        });
Let's create our some of event :-
  1. When file is added :-
    myDropzone.on("addedfile", function(file) {
                file.previewElement.querySelector(".start").onclick = function() { myDropzone.enqueueFile(file); };
        // Our start and cancel buttons are set to display:none via css, Let's bring them back
                jQuery('#actions .start').css('display', 'inline-block');
                jQuery('#actions .cancel').css('display', 'inline-block');
            });?
  2.  Let's change our Total Upload Progress .
    myDropzone.on("totaluploadprogress", function(progress) {
                document.querySelector("#total-progress .progress-bar").style.width = progress + "%";
            });?
  3. Let's change the progress bar when sending.
    myDropzone.on("sending", function(file) {
                document.querySelector("#total-progress").style.opacity = "1";
                file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
            });?
  4. Let's change progress page when uploading is completed.
    myDropzone.on("queuecomplete", function(progress) {
                document.querySelector("#total-progress").style.opacity = "0";
            });?
  5. Let's change the state of "start" and "cancel" button.
    document.querySelector("#actions .start").onclick = function() {
                myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
            };
            document.querySelector("#actions .cancel").onclick = function() {
                myDropzone.removeAllFiles(true);
            };?
  6. Let's do some magic thing, when file is uploaded or process of uploading is success. We created an array "fileName" , we need to populate them with dropzone filename, serverFilename and associated fileId. Which can be used for deleting file-name.
    myDropzone.on("success", function(file, data) {
    
                var filenameIs = JSON.parse(data).filename;
                var aa = file.previewElement.querySelector("[data-dz-name]");
                aa.innerHTML = filenameIs;
                var ab = file.previewElement.querySelector("[data-dz-thumbnail]");
                ab.setAttribute("alt", filenameIs);
    
                fileList[i] = {
                    "origianlFileName" : filenameIs,
                    "fileName" : file.name,
                    "fileId" : i
                };
                i += 1;
    
            });?
  7.  Let's delete our file when user asks to delete.
    myDropzone.on("removedfile", function(file) {
                var removeFile = "";
                for (var f = 0; f < fileList.length; f++) {
                    if (fileList[f].fileName == file.name) {
                        removeFile = fileList[f].origianlFileName;
                    }
                }
                jQuery.ajax({
                    type: 'POST',
                    url: baseUrl+'/upload/delete',
                    data: {
                        id: removeFile,
                        _token: token
                    },
                    dataType: 'html',
                    success: function(data){
                        var rep = JSON.parse(data);
                        if(rep.success == 200)  {
                            console.log('Deleted');
                        }
    
                    }
                });
            });

All Code Together

Laravel View File 

Create a blade file with name "dropzone.blade.php" and add below content

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/min/dropzone.min.css">
    <style>
        #actions {
            margin: 2em 0;
        }
        #actions .start , #actions .cancel { display: none; }
        div.table {
            display: table;
        }
        div.table .file-row {
            display: table-row;
        }
        div.table .file-row > div {
            display: table-cell;
            vertical-align: top;
            border-top: 1px solid #3c3c3c;
            padding: 8px;
        }
        div.table .file-row:nth-child(odd) {
            background: #3c3c3c;
        }
        #total-progress {
            opacity: 0;
            transition: opacity 0.3s linear;
        }
        #previews .file-row.dz-success .progress {
            opacity: 0;
            transition: opacity 0.3s linear;
        }
        #previews .file-row .delete {
            display: none;
        }
        #previews .file-row.dz-success .start,
        #previews .file-row.dz-success .cancel {
            display: none;
        }
        #previews .file-row.dz-success .delete {
            display: block;
        }
    </style>
</head>

<body>
<div class="container">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div class="panel panel-default">
                <div class="panel-heading">Upload</div>
                <div class="panel-body">
                    <div id="actions" class="row">
                        <div class="col-lg-7">
                            <span class="btn btn-success fileinput-button">
                                <i class="glyphicon glyphicon-plus"></i>
                                <span>Add files...</span>
                            </span>
                            <button type="submit" class="btn btn-primary start">
                                <i class="glyphicon glyphicon-upload"></i>
                                <span>Start upload</span>
                            </button>
                            <button type="reset" class="btn btn-warning cancel">
                                <i class="glyphicon glyphicon-ban-circle"></i>
                                <span>Cancel upload</span>
                            </button>
                        </div>
                        <div class="col-lg-5">
                            <span class="fileupload-process">
                              <div id="total-progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                                  <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
                              </div>
                            </span>
                        </div>
                    </div>

                    <div class="table table-striped" class="files" id="previews">
                        <div id="template" class="file-row">
                            <div>
                                <span class="preview"><img data-dz-thumbnail /></span>
                            </div>
                            <div>
                                <p class="name" data-dz-name></p>
                                <strong class="error text-danger" data-dz-errormessage></strong>
                            </div>
                            <div>
                                <p class="size" data-dz-size></p>
                                <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                                    <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
                                </div>
                            </div>
                            <div>
                                <button class="btn btn-primary start">
                                    <i class="glyphicon glyphicon-upload"></i>
                                    <span>Start</span>
                                </button>
                                <button data-dz-remove class="btn btn-warning cancel">
                                    <i class="glyphicon glyphicon-ban-circle"></i>
                                    <span>Cancel</span>
                                </button>
                                <button data-dz-remove class="btn btn-danger delete">
                                    <i class="glyphicon glyphicon-trash"></i>
                                    <span>Delete</span>
                                </button>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/min/dropzone.min.js"></script>
    <script type="text/javascript">
        var baseUrl = "http://example.com";
        var token = "{{ csrf_token() }}";
        var previewNode = document.querySelector("#template");
        previewNode.id = "";
        var previewTemplate = previewNode.parentNode.innerHTML;
        previewNode.parentNode.removeChild(previewNode);
        var fileList = new Array;
        var i =0;
        var myDropzone = new Dropzone(document.body, {
            url: baseUrl+"/upload/files",
            params: { _token: token },
            paramName: "file",
            acceptedFiles : "image/*",
            thumbnailWidth: 80,
            thumbnailHeight: 80,
            parallelUploads: 1,
            maxFilesize: 5,
            previewTemplate: previewTemplate,
            autoQueue: false,
            dictFileTooBig: 'File is too big',
            previewsContainer: "#previews",
            clickable: ".fileinput-button",
        });
        myDropzone.on("addedfile", function(file) {
            file.previewElement.querySelector(".start").onclick = function() { myDropzone.enqueueFile(file); };
            jQuery('#actions .start').css('display', 'inline-block');
            jQuery('#actions .cancel').css('display', 'inline-block');
        });
        myDropzone.on("totaluploadprogress", function(progress) {
            document.querySelector("#total-progress .progress-bar").style.width = progress + "%";
        });
        myDropzone.on("sending", function(file) {
            document.querySelector("#total-progress").style.opacity = "1";
            file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
        });
        myDropzone.on("queuecomplete", function(progress) {
            document.querySelector("#total-progress").style.opacity = "0";
        });
        document.querySelector("#actions .start").onclick = function() {
            myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
        };
        document.querySelector("#actions .cancel").onclick = function() {
            myDropzone.removeAllFiles(true);
        };
        myDropzone.on("success", function(file, data){
            var filenameIs = JSON.parse(data).filename;
            var aa = file.previewElement.querySelector("[data-dz-name]");
            aa.innerHTML = filenameIs;
            var ab = file.previewElement.querySelector("[data-dz-thumbnail]");
            ab.setAttribute("alt", filenameIs);

            fileList[i] = {
                "origianlFileName" : filenameIs,
                "fileName" : file.name,
                "fileId" : i
            };
            i += 1;
        });
        myDropzone.on("removedfile", function(file) {
            var removeFile = "";
            for (var f = 0; f < fileList.length; f++) {
                if (fileList[f].fileName == file.name) {
                    removeFile = fileList[f].origianlFileName;
                }
            }
            jQuery.ajax({
                type: 'POST',
                url: baseUrl+'/upload/delete',
                data: {
                    id: removeFile,
                    _token: token
                },
                dataType: 'html',
                success: function(data){
                    var rep = JSON.parse(data);
                    if(rep.success == 200)  {
                        console.log('Deleted');
                    }

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

Route : 

Route::post('upload/files', 'HomeController@uploadFiles');
Route::post('upload/delete', 'HomeController@deleteFiles');

HomeController File

We will be using 3 facade :-

use Illuminate\Support\Facades\Input;
use Illuminate\Support\Facades\Response;
use Illuminate\Support\Facades\Validator;

Action Method :-

public function uploadFiles() {
	
    $rules = [
	    "file" => "image|max:5120"
	];

	$data = Input::all();
	$validator = Validator::make($data, $rules);
	
        if($validator->fails()) {
	    return Response::make($validator->errors()->first(), 400);
	}

	$destinationPath = 'files';

	$extension = Input::file('file')->getClientOriginalExtension();

	$filename = uniqid().'.'.$extension;

	try {
	    $uploadSuccess = Input::file('file')->move($destinationPath, $filename);
	    if($uploadSuccess) {

		$send = json_encode(['success' => 200, 'filename' => $filename]);

	        return Response::json($send);
            } else {
		return Response::json('error', 400);
	    }
	} catch(\Exception $e) {
	    dd('Could not upload - Contact administrator');
	}
}

public function deleteFiles() {

	$data = Input::all();
	@unlink('files/'.$data['id']);
	return Response::json(json_encode(['success' => 200]));
	
}

Loading ...

Related Results :

  1. DropzoneJS with Laravel
  2. Check Duplicate file before Uploading
Note :
  • Related Posts are generally User Blog posts.
  • or Other tutorials from other networks of w3clan.com.
  • Any registered user can create related posts based on search term tags.

About the Author