I have used the below code the image has been deleted but the thumbnail image still showing.
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);
});
}
For deleting thumbnails you have to enable addRemoveLinks: true, and to use "removedfile" option in dropzonejs
removedfile: Called whenever a file is removed from the list. You can listen to this and delete the file from your server if you want to.
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 for delete script and it 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;
}
It works on my side, so I hope it helps.
add_your_filename_here ? How to pass the file name when the user clicks the "Remove File" button?
file.xhr.response.In addition to the best answer above - to remove spaces and replace with dashes and convert to lower case apply this js in the dropzone.js file:
name = name.replace(/\s+/g, '-').toLowerCase();
To the filename handling - I edited the dropzone.js file AND the above ajax call. This way, the client handles the file naming, and it AUTOMATICALLY gets sent to the PHP/server-side, so u don't have to redo it there, and it's URL safe pretty much.
In some instances the js changed depending on the function / naming:
dropzone.js - line 293 (approx):
node = _ref[_i];
node.textContent = this._renameFilename(file.name.replace(/\s+/g, '-').toLowerCase());
dropzone.js - line 746 (approx):
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 whole removedFile section up to the top of dropzone.js like so:
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 a message box in the html: (div id="msg"></div>) in the HTML that will allow server side error handling/deleting to post a message back to the user as well.
in dropzone.php:
if (isset($_POST['id']) {
//delete/unlink file
echo $_POST['id'] . ' deleted'; // send msg back to user
}
This is only an expansion with the 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 it suited me since the naming changes. You could pass the variables in a js function yourself to handle filename spaces/chars / etc.
