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

You might want to provide some actual code for people to help you with! — tlenss, Oct 15 '13 at 07:26
Well, how did you implement the server code? Dropzone is just client side. It would be useful to see your server code. — tomca32, Oct 15 '13 at 07:27

6opko · Accepted Answer · 2014-04-15T19:15:45.837

97

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.

edited Apr 15 '14 at 19:15

answered Oct 18 '13 at 16:26

6opko

1,718
2
20
28

Thanks for posting this! Been debugging for awhile-- this return statement worked for me – Alan Illing Jan 03 '14 at 07:14
how to fill in the `add_your_filename_here` ? How to pass the file name when the user clicks the "Remove File" button? – Raptor Feb 15 '14 at 18:15
I added var name = file.name; making it data: "id="+name, – 6opko Apr 15 '14 at 19:16
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. – Leonardo Feb 24 '15 at 18:38
2

@6opko, is there any way to get the index of removed file from dropzone? is it possible to get it? – MegaBytes Mar 13 '15 at 11:10
1

@Leonardo: I think that you can return the id after upload, then get it in `file.xhr.response`. – CôteViande Jun 12 '15 at 03:46
Concerning the delete - what if user tries to upload two files with the same name and then clicks "remove" under one of them? – naneri Dec 26 '15 at 13:59
1

Thanks @6opko, you're a sanity saver! – Juan Pablo Ugas Aug 30 '16 at 18:56
**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. – jjarolim Nov 10 '19 at 17:19
@jjarolim 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 – 6opko Apr 13 '20 at 11:58

score 0 · Answer 2 · edited Oct 23 '20 at 14:35

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.

how to upload and delete files from dropzone.js

2 Answers2

Linked