jQuery File Uploader JavaScript API: Controlling Drag and Drop

Uploadcare jQuery File Uploader supports Drag and Drop that you can control via JavaScript API.

Checking a browser support

We use a boolean parameter that is set to true if a browser supports Drag and Drop and file API.

1
var browser_supports_dragdrop = uploadcare.dragdrop.support;

Uploading files by dropping

You can get file objects after dropping them on the el element, where el can be a DOM element, selector or jQuery object.

1
uploadcare.dragdrop.uploadDrop(el, callback[, settings]);

For instance, that is the way to upload a single file. If multiple files are selected, only the first one of them gets uploaded:

1
uploadcare.dragdrop.uploadDrop(el, function(file) {
2
  file.done(...);
3
});

You can also upload multiple files at once. Here is how:

1
uploadcare.dragdrop.uploadDrop(el, function(files) {
2
  files; // array
3
}, {multiple: true});

settings here is a settings object.

Getting raw data by dropping

Our JavaScript API allows you to get raw data after dropping files on the el element, which can either be a DOM element, selector or jQuery object.

1
uploadcare.dragdrop.receiveDrop(el, callback);

For example:

1
uploadcare.dragdrop.receiveDrop(el, function(type, data) {
2
  type; // 'object' or 'url'
3
  data; // Array of native File objecs or URLs.
4
5
  // Retrieving files, or just the first one if there are many.
6
  var file = uploadcare.fileFrom(type, data[0]);
7
8
  // Retrieving multiple files in one go
9
  var fileArray = uploadcare.filesFrom(type, data);
10
});