Docs

JavaScript API — Handling Custom Tabs

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