JavaScript API — Handling custom tabs

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

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.

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.