Widget Visual Tweaks

Color Buttons

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

Crazy Button

You can do something really crazy with CSS.

Uploading Circle Color

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

Try to upload new file:

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.

One file uploader:

Multiple files:

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.

If you haven't found what you were looking for in these docs, try looking in our Knowledge Base.