JavaScript API — Controlling Drag and Drop

  • This documentation is for the version 3.3.0 of the widget. If you're looking for the JavaScript for Widget v2 docs, check here.

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

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

We’re always happy to help with code, integration, and other stuff. Search our site for more info or post your question in our Community Area.