Uploading Widget JavaScript API — Controlling Drag and Drop
On this page
- We’ve built the next version of the File Uploader.
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