jQuery File Uploader JavaScript API: Upload dialog and panel

We’ve built the next version of the File Uploader.

Upload dialog is a modal window on top of your page. It contains a set of tabs with different upload sources and file preview. Upload panel is the same thing, just in a non-modal form.

Open Upload dialog

You can use openDialog to open a standalone upload dialog over your page:

1 var dialog = uploadcare.openDialog(files, tab, settings);

Where,

files, a file, file array or group that will be shown as already uploaded.
tab, a name of a tab opened by default when no predefined files are present.
settings, a settings object.

Open Upload panel

openPanel is used to open an upload panel at any point on your page:

1 var panel = uploadcare.openPanel(container, files, tab, settings);

Where,

container, a selector or DOM element that will be replaced with an upload panel. This will be put back on your panel resolving.
files, a file, file array or group that will be shown as already uploaded.
tab, a name of a tab opened by default when no predefined files are present.
settings, settings object.

Dialog API

Both dialog and panel instances implement the extended jQuery promise interface showing progress on a user tab.

1 dialog.done(function(result) {
2   // Dialog closed and a file or file group is selected.
3 });
4 
5 dialog.fail(function(result) {
6   // Dialog closed and no file or file group was selected.
7   // The result argument is either null or the last selected file.
8 });
9 
10 dialog.always(function() {
11   // Handles a closing dialog regardless of whether or not files were selected.
12 });
13 
14 dialog.progress(function(tabName) {
15   // tabName is selected. progress() works when you click a tab name on the list.
16   // Technically, it would work on any dialog progress, i.e. when preview appears.
17 });

In addition to the jQuery promise interface, dialog and panel objects have the following properties and methods,

Property	Type	Description
`resolve()`	method	Resolve a dialog with currently selected files
`reject()`	method	Close the dialog and discard any file selection
`addFiles(FileInstance[])` or `addFiles(type: string, any[])`	method	Add an array of files to your dialog result set. Accepts file instance array or the same arguments as `filesFrom`
`switchTab(tabName: string)`	method	Switch your dialog to a tab with a provided name. The name you provide should be present in the `settings.tabs` array
`fileColl`	FileCollection	A collection of selected files. Use it to subscribe and change events. See FileCollection API
`hideTab(tabName: string)`	method	Hide a tab with a provided name
`showTab(tabName: string)`	method	Show a tab with a provided name
`isTabVisible(tabName: string)`	method	Inquire if a tab with a provided name is visible
`onTabVisibility()`	callback	Register a callback that will be called when tab visibility gets changed. “hideTab()” and “showTab()” provide tab visibility changes. Another example of changing visibility would be Preview Tab. The first argument stands for the tab name, and the second is a boolean related to tab visibility

You can find code examples for solving typical tasks like a Check if a file was added or removed when working with the uploading widget in the instruction JS code snippets and CSS tricks.

Discover more customization examples.

FileCollection API

Property	Type	Description
`anyDoneList`	$.Callbacks	Fired when file uploading done.
`anyFailList`	$.Callbacks	Fired when file uploading failed.
`anyProgressList`	$.Callbacks	Fired on file uploading progress tick.
`onAdd`	$.Callbacks	Fired when file added.
`onRemove`	$.Callbacks	Fired when file removed.
`onReplace`	$.Callbacks	Fired when file is replaced with another one.
`onSort`	$.Callbacks	Fired on files sort.
`onAnyDone(cb)`	callback	Add callback to the `anyDoneList`.
`onAnyFail(cb)`	callback	Add callback to the `anyFailList`.
`onAnyProgress(cb)`	callback	Add callback to the `anyProgressList`.
`lastProgresses()`	method	Get array of progresses for all files in the collection.
`add(file)`	method	Add file to the collection.
`remove(file)`	method	Remove file from the collection.
`clear()`	method	Remove all files from the collection.
`replace(old, new)`	method	Replace file with another one.
`sort(comparator)`	method	Sort files using given comparator.
`get(index)`	method	Get file by index.
`length()`	method	Get files count.

1	dialog.done(function(result) {
2	// Dialog closed and a file or file group is selected.
3	});
4
5	dialog.fail(function(result) {
6	// Dialog closed and no file or file group was selected.
7	// The result argument is either null or the last selected file.
8	});
9
10	dialog.always(function() {
11	// Handles a closing dialog regardless of whether or not files were selected.
12	});
13
14	dialog.progress(function(tabName) {
15	// tabName is selected. progress() works when you click a tab name on the list.
16	// Technically, it would work on any dialog progress, i.e. when preview appears.
17	});