uploadcaredocs

Extending Widget With Custom Tabs

  • This documentation is for the version 3.6.1 of the widget. If you’re looking for the widget v2 docs, check here.

We get you might extend the File Uploader with functions specific to your product. That’s done by adding custom tabs to the widget.

You start with registering a tab under some name and adding it to the list of your widget tabs. Let’s cover the process of adding a new tab, the one listing files uploaded via your widget instance:

Registering a New Tab

You register a new tab via the registerTab method.

<div id="uploader-placeholder">Uploading. Please wait...</div>
<script>
function favoriteFiles(container, button, dialogApi, settings) {
  ...
}
uploadcare.registerTab('favorites', favoriteFiles);
uploadcare.openPanel('#uploader-placeholder', null, {
  tabs: 'favorites file facebook dropbox gdrive instagram vk',
  favoriteFiles: [...]
});
</script>

Coding What the Tab Does

Once the tab is registered, we need to code its functionality. When making the tab listing file uploads made via some widget instance, next step is passing a list of file UUIDs with the settings object. When a user selects a file for upload, its info can be passed to the dialog using dialogApi.

function favoriteFiles(container, button, dialogApi, settings) {
  $.each(settings.favoriteFiles, function(i, uuid) {
    container.append($('<img>', {
        'class': 'favorite-files-image',
        'src': settings.cdnBase + '/' + uuid + '/-/scale_crop/280x280/center/',
      })
      .on('click', function(e) {
        dialogApi.addFiles([uploadcare.fileFrom('uploaded', uuid, settings)])
      })
    );
  });
}

Adjusting the Tab Look

You can go beyond coding what the tab does to customizing ist look via CSS. In case you want to add custom icons, make use of the <svg> and <symbol> elements. Check out the example below:

<svg width="0" height="0" style="position:absolute">
  <symbol id="uploadcare--icon-favorites" viewBox="0 0 32 32">
    <path d="M 16 22.928 L 23.416 27.4 L 21.454 18.965 L 28 13.292 L 19.37 12.552 L 16 4.6 L 12.629 12.552 L 4 13.292 L 10.546 18.965 L 8.584 27.4 Z"/>
  </symbol>
</svg>
.uploadcare--menu__item_tab_favorites.uploadcare--menu__item_current {
  color: #f0cb3c;
}

Live Example

Here’s a live example of the widget with the custom tab listing files uploaded via the specific widget instance,

Uploading. Please wait...

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.