JavaScript API — Handling Custom Tabs

This documentation 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.

Beside the built-in widget tabs like file, url, dropbox, etc. there is an option of implementing a tab with a custom behavior. This is a relatively complex yet powerful way to customize the dialog.

Registering a new tab

When you want to add a custom tab, you should first register it with a given name, which can then be used in your tabs list.

uploadcare.registerTab(name, constructor);

constructor is a function that is called to create a new tab.

Custom Tabs constructor

A constructor is called every time a new dialog is opened. Here is how you declare it,

function myTab(container, button, dialogApi, settings, name) {
  ...
}

Where,

container is a jQuery object holding your main tab element.
button is a jQuery object with your tab button.
dialogApi is an object(#dialog-api) holding methods to control your dialog.
settings is a settings object.
name is a name used when registering a tab and in the tabs list.

Note, a single constructor can be registered under several names. You can find more examples in our widget customization tutorial.