Widget Visual Tweaks
- This is for the version 2.x of the widget. If you’re looking for the widget v3 docs, check here
- Learn how to 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.
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.
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.