Adding a custom button to Dropzone - dropzone.js

Question

I have been googling this and trying to find a solution which seems to be pretty much impossible, I have dropzone integrated in to my application with the remove button, I want to add an additional button to each thumb nail is this possible to do? so two buttons per each thumbnail?

Answer 1

I have added custom download button for each file check below code
var myDropzone = new Dropzone("#form", {
maxFilesize: 2, // MB
addRemoveLinks: true,
dictRemoveFileConfirmation : 'Sure Want To Delete',
init: function() {
this.on("success", function(file, responseText) {
var filename = file.name;
$('#form').append("<input type='hidden' data='"+filename+"' name='files[]' value='"+responseText+"'>");
});
this.on("complete",function(file){
var newNode = document.createElement('a');
newNode.className = 'btn btn-primary btn-xs downloadbtn';
newNode.href = "<?= SITE_URL.''.'upload/attachments/' ?>"+file.name;
newNode.target = "_blank";
newNode.innerHTML = '<i class="fa fa-download"></i> Download';
file.previewTemplate.appendChild(newNode);
});
}
});

Answer 2

Are you creating a custom theme for the thumbnail? That is the easiest way to add buttons etc. http://www.dropzonejs.com/#theming
for example:
<div id="preview-template" style="display:none">
<div class="documents_drop_file_thumb">
<div class="documents_drop_file_thumb_remove"><a class="dz-remove" href="javascript:undefined;" data-dz-remove=""><img src="<?php echo DIRECTORY_INDEX . "/"; ?>images/remove_file.png" alt=""></a></div>
<div class="documents_drop_file_thumb_EXTRABUTTON"><a class="dz-extraaction" href="javascript:undefined;"><img src="<?php echo DIRECTORY_INDEX . "/"; ?>images/extrabutton_file.png" alt=""></a></div>
<div class="documents_drop_file_thumb_image"><img data-dz-thumbnail /></div>
<div class="documents_drop_file_thumb_progress_status"><span data-dz-name></span></div>
<div class="documents_drop_file_thumb_progress"><span class="dz-upload" data-dz-uploadprogress></div>
<div class="documents_drop_file_thumb_progress_status"><span data-dz-errormessage></span></div>
</div>
Then all you need is a dropzone parameter when setting up your dz.
//Prepare the drop zone area
var myNewdDropzone = new Dropzone("#idOfForm", {
url: "my-ajax.php",
method: "POST",
addRemoveLinks: false,
clickable: true,
previewTemplate: document.querySelector('#preview-template').innerHTML,
init : function() {
this.on("addedfile", function(file) { new_file_added(file); });
this.on("thumbnail", function(file,fileurl) { new_thumbnail_added(file); });
this.on("removedfile", function(file) { new_file_removed(file); });
this.on("totaluploadprogress", function(progress) { display_progress(progress); });
this.on("queuecomplete", function() { all_files_uploaded(); });
//this.on("processing", function(file) { new_file_processed(file); });
}
});
Pay particular attention to:
EXTRABUTTON - that is your shiny new button area
addRemoveLinks - your template has them, so don't add new ones (with a nice icon, assuming you have a nice icon with that name)
previewTemplate - that sets up your new thumbnail template
this.on("etcetcetc") calls functions driven by events if you need them