Widget Visual Tweaks

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

Here’s some inspiration to amplify your widget workflow,

Changing Uploader Button Color

That’s one of the most common cases, changing the button color. It can be easily done with CSS,

Crazy Button

Time for some fun, CSS can really drive your buttons crazy,

Uploading Circle Color

With the File Uploader, you track the progress of your uploads with the circle being filled with color during the process. The fill color can be changed via the CSS color property, while border-color will work for your background.

Custom Progress Bar

If you wish to replace the built-in progress bar, you need to listen the current widget object. You can get it in the onChange callback. It will be a file object for regular widgets or a group object for multiple widgets. Then, you need to listen to the progress event and change your progress bar in according to a current uploadProgress.

The following installProgressBar function does all that. It receives the two arguments: widget instance and progress bar DOM element. Everything else runs on CSS, animation included.

See the Pen Custom progress bar exampleby uploadcare (@uploadcare) on CodePen.

Uploaded Image Preview

The default widget behavior is when a user selects an image, its preview is then shown in the upload dialog. You might want to embed this preview in your page somewhere around the widget button. Such a preview could be more informative than simply displaying file names and sizes.

Note, you have full control over size and position of your embed, just use CSS.

Image preview for a multi-file widget may look different:

You can change the displayed images or rearrange the existing oness; all changes will then be reflected in the thumbnail list.