Widget Visual Tweaks

  • This is for the version 2.x of the widget. If you’re looking for the widget v2 docs, check here
  • Here’s how you migrate from v2 to v3.

Color Buttons

One of the things you can do is change upload button color. This can be easily done using CSS.

See the Pen Color buttons exampleby uploadcare (@uploadcare) on CodePen.

Crazy Button

You can do something really crazy with CSS.

See the Pen Crazy button exampleby uploadcare (@uploadcare) on CodePen.

Uploading Circle Color

Uploading circle fill color can be changed via CSS color property and backgroud color can be changed via border-color property.

Custom Progress Bar

If you want to replace builtin progress bar, you need to listen current widget object. You can obtain it in onChange callback. It will be file object for regular widget and group object for multiple widget. Then you need to listen to progress event and change your progress bar in accordance with current uploadProgress.

This is done in following installProgressBar function. It receives two arguments: Uploadcare widget instance and your progress bar DOM element. Anything else, including animation, is done via CSS.

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

Uploaded Image Preview

When user selects some image, it will be shown in the upload dialog. But what to do if you want to show image preview right on the page near to uploading widget. Such preview is more informative for user than file name and size.

You have full control of size and position, it can be changed via CSS.

Image preview for multiupload widget may look different:

You can choose different images or just rearrange existing ones: all changes in widget will be reflected in the thumbnail list.