Vitor Vitor - 4 months ago 172
HTML Question

Download uploaded file with DropzoneJs

I would like to know if it is possible to download files that have been uploaded with Dropzone. For example add to the file that are shown in the dropzone a link or a button to download.

The code for upload and to show the files already uploaded:

index.php

<html>
<head>
<link href="css/dropzone.css" type="text/css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="dropzone.min.js"></script>
<script>

Dropzone.options.myDropzone = {

init: function() {
thisDropzone = this;

$.get('upload.php', function(data) {

$.each(data, function(key,value){

var mockFile = { name: value.name, size: value.size };

thisDropzone.emit("addedfile", mockFile);

thisDropzone.emit("thumbnail", mockFile, "uploads/"+value.name);

});

});


thisDropzone.on("addedfile", function(file) {

var removeButton = Dropzone.createElement("<button>Remove</button>");


var _this = this;

removeButton.addEventListener("click", function(e) {
e.preventDefault();
e.stopPropagation();

_this.removeFile(file);

});


file.previewElement.appendChild(removeButton);
});


thisDropzone.on("removedfile", function(file) {
if (!file.serverId) { return; }
$.post("delete-file.php?id=" + file.serverId);
});

}

};
</script>

</head>
<body>
<form action="upload.php" class="dropzone" id="my-dropzone"></form>
</body>
</html>


upload.php

<?php
$ds = DIRECTORY_SEPARATOR;

$storeFolder = 'uploads';

if (!empty($_FILES)) {

$tempFile = $_FILES['file']['tmp_name'];

$targetPath = dirname( __FILE__ ) . $ds. $storeFolder . $ds;

$targetFile = $targetPath. $_FILES['file']['name'];

move_uploaded_file($tempFile,$targetFile);

} else {
$result = array();

$files = scandir($storeFolder);
if ( false!==$files ) {
foreach ( $files as $file ) {
if ( '.'!=$file && '..'!=$file) {
$obj['name'] = $file;
$obj['size'] = filesize($storeFolder.$ds.$file);
$result[] = $obj;
}
}
}

header('Content-type: text/json');
header('Content-type: application/json');
echo json_encode($result);
}
?>


any help will be much appreciated

Answer

Yes I found it possible by altering the dropzone.js file, not ideal for updates but only way I found that worked for me.

Add these 6 lines of code to the addedfile: function around line 539 note Ive marked the code that exists already

// the following line already exists
if (this.options.addRemoveLinks) {

    /* NEW PART */
    file._openLink = Dropzone.createElement("<a class=\"dz-open\" href=\"javascript:undefined;\">Open File</a>");
    file._openLink.addEventListener("click", function(e) {
      e.preventDefault();
      e.stopPropagation();
      window.open("http://www.mywebsite.com/uploadsdirectory/"+file.name);
    });
    /* END OF NEW PART */

    // the following lines already exist
    file._removeLink = Dropzone.createElement("<a class=\"dz-remove\" href=\"javascript:undefined;\">" + this.options.dictRemoveFile + "</a>");
    file._removeLink.addEventListener("click", function(e) {

Then you'll need to edit the CSS with a class 'dz-open', to style the button.