Uploading multiple files with the same file.name using dropzone.js

Question

I\'m implementing dropzone.js and everything is perfect until I try to upload multiple files with the same name, let\'s say uploading photos from an iOS device where all hav

Answer 1

I'm using a jQuery version build up in my project. I hope you don't mind, and maybe this will help in anyway..?

var dropbox = $(form);
var dropzone_files = [];


dropbox.dropzone({
url: '/etc/',
init: function() {
var Dropzone = this;
// remove function
this.on('removedfile', function(file) {
for(var i=0; i< dropzone_files.length; i++) {
    if (file.name == dropzone_files[i]['old_name']) {
    var file_name = dropzone_files[i]['new_name'];
    var data = { 'file_name' : dropzone_files[i]['new_name'] };
    break;
    }
}
console.log(data);
var removeData = form.serialize() + '&' + $.param(data);
//console.log(removeData);
$.ajax({
        type: 'POST',
        url: 'your-dropzone-remove-file.php',
        data: removeData,
        success: function(report) {
            dropzone_files.splice(i,1);
            console.log(dropzone_files);
            //do more things here
        });
 // end init
 },
 //upload function
 success: function(file, Response) {
         //console.log(Response); is your response from php file of whatever rename.
         // pair up old-filename with new file name.
         dropzone_files.push({'new_name': Response, 'old_name': file.name});
         //console.log(dropzone_files);
         // do whatever
        }
});

I found out that on both success or remove event, the 'file' of function(file), (i.e. file.name) is always the original file name dragged into the dropbox. There is no way to change this. Therefore, if you upload a renamed file during upload, you will not be able to remove it unless we have the value stored somewhere.

I tried many attempt to distort its values or update its values, including append(), push(), and map() but didn't succeed on it.

So on upload.php I return an echo of the new file name stored in the server.

Then I pair it up using a 'medium' custom array/object during on success event against the file.name.

dropzone_files.push({'new_name': Response, 'old_name': file.name});

Then, on remove, since file is still the original filename, but this time, we can compare against the arrayobject to get the new filename, and delete the object from the array on each click via another ajax post, but this time, with the new file name, referred.

This as well: https://github.com/enyo/dropzone/issues/656

Regards.