Uploading Widget JavaScript API — Handling Custom Tabs

Beside the built-in file uploading 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);javascript

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) {
  ...
}javascript

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 Uploading Widget customization tutorial.