Download uploaded file with DropzoneJs

dropzone.js, html, javascript, php

Solution

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.

Problem

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

Original source