blueimp/jQuery-File-Upload — Issue #756: Drag and drop upload does not work with iframe transport
Author: juriga
Created: 2011-11-05 01:34:45+00:00
State: open

After some investigation, I noticed that the files dropped to the dropZone are not transferred to the iframe. I suppose it is not possible to programmatically append File objects from `event.dataTransfer` to the input fields (security issues).

Thus, it should be clearly noted in the documentation that *drag'n'drop + iframe transport is not a supported combination*. This would be a useful bit of information for users that are forced to use iframe transport (`forceIframeTransport: true`) due to cross-domain issues.

To prevent a broken drag'n'drop experience in my case, I made the following crude patch to the [drop zone effect widget](https://github.com/blueimp/jQuery-File-Upload/wiki/Drop-zone-effects).

```javascript
_create: function () {
if (this.options.dropZone && !this.options.dropZone.length) {
this.options.dropZone = this.element.find('.dropzone-container div');
}
$.blueimp.fileupload.prototype._create.call(this);

// Use drag'n'drop only if AJAX upload is supported/enabled
if ($.blueimp.fileupload.prototype._isXHRUpload.call(this, this.options)) {
/* bind drag'n'drop events */
}
},
```

A similar patch can be made to the main widget:

```javascript
_initEventHandlers: function () {
var ns = this.options.namespace || this.widgetName;

// Use drag'n'drop only if AJAX upload is supported/enabled
if (this._isXHRUpload(this.options)) {
this.options.dropZone
.bind('dragover.' + ns, {fileupload: this}, this._onDragOver)
.bind('drop.' + ns, {fileupload: this}, this._onDrop)
.bind('paste.' + ns, {fileupload: this}, this._onPaste);
}

this.options.fileInput
.bind('change.' + ns, {fileupload: this}, this._onChange);
},
````