Custom widget behavior

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

Another way you can customize your widget is altering its behavior? That’s done by adding custom tabs to the widget. The primary thing to do here is registering a tab under some name and adding this name to the list of your widget tabs. Let’s cover the process of adding a tab listing files uploaded via your widget.

Registering a new tab

<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>

Making the tab work

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 look of your tab

You can go beyond changing the widget behavior and also customize how it looks like via CSS. In case you want to add custom icons, make use of <svg> and <symbol>. 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;
}

A live example

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

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.