jQuery File Uploader JS API: Controlling Drag&Drop

jQuery File Uploader package is officially deprecated as of September 1, 2025.
Moving forward, we will no longer release updates or new versions of this widget.
Support will also be discontinued, except in cases where critical security vulnerabilities need to be addressed.

We recommend considering our web-component-based File Uploader.

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.

1var 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.

1uploadcare.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:

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

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

1uploadcare.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.

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

For example:

1uploadcare.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});