How to download and delete files from dropzone.js

Question

I used the code below, the image was deleted, but a thumbnail is shown.

Dropzone.options.myDropzone = { init: function() { this.on("success", function(file, response) { file.serverId = response; }); this.on("removedfile", function(file) { if (!file.serverId) { return; } $.post("delete-file.php?id=" + file.serverId); }); } 

Answer 1

To remove thumbnails you need to enable addRemoveLinks: true, and use the "removefile" option in dropzonejs

removefile: Called whenever a file is removed from the list. You can listen to this and delete the file from your server if you want.

 addRemoveLinks: true, removedfile: function(file) { var _ref; return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0; } 

I also added an ajax call to remove the script and looks like this:

 addRemoveLinks: true, removedfile: function(file) { var name = file.name; $.ajax({ type: 'POST', url: 'delete.php', data: "id="+name, dataType: 'html' }); var _ref; return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0; } 

He works on my side, so I hope this helps.

Answer 2

in addition to the better answer above - remove spaces and replace dashes and convert to lowercase, apply this js in dropzone.js file:

 name=name.replace(/\s+/g, '-').toLowerCase(); 

to handle the file name - I edited the dropzone.js file And the above ajax call. Thus, the client processes the file names and it is automatically sent to the php / server side, so you do not have to redo it there, and its URL is largely safe.

In some cases, js has changed depending on function / naming:

dropzone.js - line 293 (approximate):

 node = _ref[_i]; node.textContent = this._renameFilename(file.name.replace(/\s+/g, '-').toLowerCase()); 

dropzone.js - line 746 (approximate):

 Dropzone.prototype._renameFilename = function(name) { if (typeof this.options.renameFilename !== "function") { return name.replace(/\s+/g, '-').toLowerCase(); } return this.options.renameFilename(name.replace(/\s+/g, '-').toLowerCase()); }; 

I moved the entire removeFile section to the top of dropzone.js as follows:

  autoQueue: true, addRemoveLinks: true, removedfile: function(file) { var name = file.name; name =name.replace(/\s+/g, '-').toLowerCase(); /*only spaces*/ $.ajax({ type: 'POST', url: 'dropzone.php', data: "id="+name, dataType: 'html', success: function(data) { $("#msg").html(data); } }); var _ref; if (file.previewElement) { if ((_ref = file.previewElement) != null) { _ref.parentNode.removeChild(file.previewElement); } } return this._updateMaxFilesReachedClass(); }, previewsContainer: null, hiddenInputContainer: "body", 

Note. I also added in the message field in html: (div id = "msg">) in html, which will allow processing / deleting errors on the server side to send a message back to the user.

in dropzone.php:

 if(isset($_POST['id']){ //delete/unlink file echo $_POST['id'].' deleted'; // send msg back to user } 

This is only an extension with working code on my side. I have 3 files, dropzone.html / dropzone.php / dropzone.js

Obviously, you would create a js function instead of repeating the code, but since the naming changes are fine with me. You can simply pass variables into js functions yourself to handle file namespaces / characters / etc.

Answer 3

Yes, you can easily delete a file from the database, as well as from the server folder. I did this by writing a function and calling delete.php and passing fid as a parameter:

 function deletefile(value) { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { alert(xmlhttp.responseText); } } xmlhttp.open("GET","delete.php?fid="+value,true); xmlhttp.send(); } 

set fid as follows

 file.fid=responseText; 

You can get the working code here.