JavaScript API — Controlling Drag and Drop

  • This is for the version 3.x of the widget. If you’re looking for the widget v2 docs, check here
  • Here’s how you migrate from v2 to v3.

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

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.

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,

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

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

uploadcare.dragdrop.uploadDrop(el, function(files) {
  files; // array
}, {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.

uploadcare.dragdrop.receiveDrop(el, callback);

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);
});