Geek Answers Handbook

Download downloaded file from DropzoneJs

I would like to know if it is possible to upload files that have been downloaded using Dropzone. For example, add a link or download button to the file that appears in dropzone.

Code for downloading and displaying already downloaded files:

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 would be much appreciated

+6
source share
5 answers

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

Add these 6 lines of code to the added file: function around line 539 note Ive marks existing code

 // 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 will need to edit the CSS with the dz-open class to style the button.

+5
source

This can be done using the example below. You still have to adjust it to your needs.

I want to display additional information after downloading the file.

To use the information sent from the server, use the success event, for example:

 Dropzone.options.myDropzone = { init: function() { this.on("success", function(file, responseText) { // Handle the responseText here. For example, // add the text to the preview element: file.previewTemplate.appendChild(document.createTextNode(responseText)); }); } };
+1
source

Use this in the init function after calling ajax. I had the same problem. Decided to use this.

 $('.dz-details').each(function(index, element) { (function(index) { $(element).attr('id', "filename_" + index); var selectFile = document.querySelector("#filename_" + index); selectFile.addEventListener("click", function () { window.open("http://localhost:8080/<<contextpath>>/pathtofile/" + $('#filename_' + index + '> div > span').text()); }); }(index)); });
+1
source

you can also add an empty link to your images, and when your download is ready, you can get the src image and set it to your link;)

 <a href="#"> <img src="" data-dz-thumbnail/> </a> $("img.data-dz-thumbnail").each(function() { $(this).closest("a").attr("href", $(this).attr("src")); $(this).closest("a").attr("target", "_blank"); });
+1
source

My code looks something like this.

  success: function(file, rawResponse){ file.previewElement.onclick = function() { alert(1);//do download } },
+1
source

More articles:


All Articles