dropzone.js .removeAllFiles() does not remove mock files

Question

I noticed that when calling .removeAllFiles() on a dropzone instance that received "mock" files using the technique as shown here does not actually have the desired effect (the mock file is still present).

Albumenize

Answer 1

I also had the same problem. I thinks it happens because the files which are added from the server does not go into the files array and when you call removeAllFiles() it won't work because it is not in the files array atall.
So the obvious solution would be to add them into the files array,it would look something like this

$(function() {
    var mockFile = { name: "banner2.jpg", size: 12345 };
    var myDropzone = new Dropzone("#my-awesome-dropzone");
    myDropzone.options.addedfile.call(myDropzone, mockFile);
    myDropzone.files.push(mockFile); // here you add them into the files array
    myDropzone.options.thumbnail.call(myDropzone, mockFile,
        "http://localhost/test/drop/uploads/banner2.jpg");
});

Now you can use myDropzone.removeAllFiles(); on some event and the files added from server will also get removed from dropzone.

NOTE: Remember when using the above code. if you are firing a server side code to delete the files from server whenever a file is removed from dropzone then all the files that came from the server will get deleted.

Metempsychosis

I would vote you up twice if i could, THANK YOU for this!! Ive been bashing my head against the wall. – Gentlemanly

For the mockFile. Include "accepted: true" or if you have set the maxFiles number, the counter will not be sync with the number of files added programmatically. Means, if you add 3 files with maxFiles set to 3, the first 3 files added manually will not be counted. – Peripheral