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

Halinahalite

You might want to provide some actual code for people to help you with! – Alfonzoalford

Well, how did you implement the server code? Dropzone is just client side. It would be useful to see your server code. – Gabler

How to remove the thumbnail of the removed image? – Halinahalite

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.

Maite

Thanks for posting this! Been debugging for awhile-- this return statement worked for me – Interlaminate

how to fill in the add_your_filename_here ? How to pass the file name when the user clicks the "Remove File" button? – Requisition

I added var name = file.name; making it data: "id="+name, – Maite

How can you set the name of the file programatically in the front end?, in my case I would love the parameter to be the id of the object. – Fernandefernandel

@6opko, is there any way to get the index of removed file from dropzone? is it possible to get it? – Klink

@Leonardo: I think that you can return the id after upload, then get it in file.xhr.response. – Nickelic

Concerning the delete - what if user tries to upload two files with the same name and then clicks "remove" under one of them? – Reflexion

Thanks @6opko, you're a sanity saver! – Shonna

Please be aware: This is only a code sample without any security. A third party may use code analysis or brute force to delete files previously uploaded. – Askance

@Askance of course, this is javascript - as it's run in the client browser there is not much we can do for the security - actual security practices can and should be followed in delete.php file in the given example – Maite

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.

Invercargill