jQuery fileupload with drag&drop submits empty file input

Question

I'm using jQuery fileupload plugin, which works quite well when uploading files by clicking the file input and choosing via the browser's dialog.

However when using drag & drop, it seems to submit an empty file input

------WebKitFormBoundaryCA4VuYwsPr7h4ItR
Content-Disposition: form-data; name="attachment"; filename=""
Content-Type: application/octet-stream

although the data object inside the fileupload's add callback does have a file right before calling data.submit()

files: Array[1]
  0: File
    lastModifiedDate: Tue Mar 18 2014 13:29:07 GMT+0100 (CET)
    name: "17_1395143728_0.png"
    size: 13542
    tempID: 1
    type: "image/png"
    webkitRelativePath: ""
    __proto__: File
  length: 1

Does anyone have an idea why this happens?

Edit: the code:

$(document).bind('drop.fileUpload', function (e) {
    if(jQuery(e.target).attr('id') !== 'dropZone'){
        return;
    }

    var fileInput = jQuery('#attachment');
    var files = e.originalEvent.dataTransfer.files;

    if (fileInput.length && files.length) {
        jQuery('#dropZone').hide();
        fileInput.fileupload('add', {files: files});

        e.preventDefault();
    }
});

jQuery('.js_toggleFileupload').fileupload({
    autoUpload: true,
    forceIframeTransport: true,
    progressInterval: 50,
    url: '/xhr',
    add: function (e, data) {

        console.debug(data); // this is where the data object has files

        var jqXHR = data.submit().done(function (e, data) { // this is where an empty file input is submitted
            //stuff happens here
        }
    }
}); 

Answer 1

D'oh! The problem is using iframeTransport and drag & drop at the same time, which can't work since the iframeTransport option posts the file input to an iframe. In the case of drag & drop, the file input has an empty value.

I've turned off the forceIframeTransport option and now it works.