File API, upload array of files

Question

I am trying to detect duplicates give users the ability to remove files from the upload window by removing them from the array I push to. Now I am having trouble uploading the finalized file list. I don't think my array has the actual file data.

Here is how I build the array of files:

var masterList = [];

function drop(evt) {
   evt.stopPropagation()
   evt.preventDefault();
   var fileList = evt.dataTransfer.files; //Getting the file(s)
   buildList(fileList); //Passing the file(s)
}

function buildList(fileList) {
   //Detect duplicates by comparing incoming filenames and current list
   var currentNames = _.pluck(masterList, 'name');
   $.each(fileList, function(i, file) {
      if ($.inArray(file.name, currentNames) == -1) {
         masterList.push(file);
         //is this pushing the file or have I lost the file handle              } else {}
   });
  }

When looking at an object in masterList, it shows:

File { name: "Logo.pdf", 
     lastModified: 1429803494000, 
     lastModifiedDate: Date 2015-04-23T15:38:14.000Z, 
     size: 1511129,
     type: "application/pdf"
   }

And this is the upload function. Each file in the upload window will have it's own progress bar.:

function startUpload() {
     if (masterList.length > 0) {
        var finished = 0;
        $.each(masterList, function(i, file) {
              console.log(file); //Output above
              var data = new FormData();
              data.append('file', file); //<- This is not allowed
              //Start Upload
              $.ajax({
                    xhr: function() {
                       var xhr = new window.XMLHttpRequest();
                       //Upload progress
                       xhr.upload.addEventListener("progress", function(evt) {
                          if (evt.lengthComputable) {
                             var percentComplete = evt.loaded / evt.total;
                             console.log(percentComplete);
                          }
                       }, false);
                       return xhr;
                    },
                    type: 'POST',
                    url: 'uploader.php',
                    data: data,
                    success: function(data) {
                       //Do something successful
                    }
                 }
              });

        });
     }
  }

Currently I cannot get the files into the FormData I created nor am I sure this is the best way to send the finalized group to server.

Answer 1

I guess to use FormData with jQuery's XHR you must tell it not to process the data, .i.e:

$.ajax({
  data: formData,
  processData: false,
  contentType: false
  ...
});