Uploading Widget JavaScript API — Controlling Drag and Drop

Uploadcare Uploading Widget 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.

var browser_supports_dragdrop = uploadcare.dragdrop.support;javascript

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.

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

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

uploadcare.dragdrop.uploadDrop(el, function(file) {
  file.done(...);
});javascript

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

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

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.

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

For example:

uploadcare.dragdrop.receiveDrop(el, function(type, data) {
  type; // 'object' or 'url'
  data; // Array of native File objecs or URLs.

  // Retrieving files, or just the first one if there are many.
  var file = uploadcare.fileFrom(type, data[0]);

  // Retrieving multiple files in one go
  var fileArray = uploadcare.filesFrom(type, data);
});javascript