CODEWITHSUNDEEP
jqueryhtmldropzone.js
orlandob11
orlandob11

Reputation: 39

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

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 have the same name: image.jpg, I can change the file name in my php code but the problem is that is no longer accessible in dropzone for example, to delete a photo uploaded, because I will end with two different names one in the file renamed with my php and the other in dropzone.

So, anyone can help me with that? There's a way to rename the file before upload with js?

Thanks,

Upvotes: 1

Views: 23690

Answers (4)

Ebarroso
Ebarroso

Reputation: 17

The solution of @Hien works, but, the problem is when you upload 2 or more files with the same original name, because your for loop will match always the first image on the array, and will remove this element. but, this element is not necessarily the image that you want to remove...

I have added the "file.lastModified" property to your dropzone_files[], cause it seems to be unique. It works for me:

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

And then, in your if condition:

if (file.name == dropzone_files[i]['old_name'] && file.lastModified==dropzone_files[i]['lastModified']) {/**/}

Note: I think lastmodify is unique, so, maybe another solution is: store lastmodify value with your img on your Database. Then, you could store this unique value in your removeData. Then, in your php, call the query "DELETE FROM images WHERE lastmodify=removeData";

For example...

Hope this help.

Upvotes: 2

Carlton Jacobson
Carlton Jacobson

Reputation: 31

This is a very simple way to do it based off hien's answer. This example also users the jQuery plugin.

When a file is added, have the server echo back name of the file on the server. Capture this with the dropzone success event, appending the server file name as a new property on the file object. Then you can access the property on the dropzone removedfile event, and send it back to the server as the name of the file to be deleted.

this.on("success", function (file, serverFileName) {
    file.serverFileName = serverFileName;
});
this.on("removedfile", function (file) {
    $.post("process.php?deleteFile=" + encodeURIComponent(file.serverFileName));
});

Upvotes: 3

Meangczac
Meangczac

Reputation: 474

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.

Upvotes: 0

amandasantanati
amandasantanati

Reputation: 331

Did you set paramName correctly? And you need to remember that Dropzone will add [] to this field if uploadMultiple is true, so you can get the values through an array named by your paramName.

But if you want to rename anyway you could try this:

Dropzone.options.myAwesomeForm = {
  paramName: "file",
  uploadMultiple: true,
  parallelUploads: 1,
  //[more configuration]

  init: function() {
    var myDropzone = this;

    //[some code]

    this.on("sending", function(file, xhr, formData) {
      var name = "name-you-want-and-should-be-unique";
      formData.append(name, file);
    });

    //[some more code]
  }
}

Note that I set parallelUploads to 1 so the name you want won't be replaced. But if you do want more you should put an data-id to every file you add through listening to event "addedfile" and then take it when you send the file through "sending".

I hope you find it useful :)

Upvotes: 3

Related Questions