how to upload and delete files from dropzone.js

Question

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); 
    });
  }

Answer 1

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.

Answer 2

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.