Widget Visual Tweaks
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.
See the Pen Uploading circle color example #1by uploadcare (@uploadcare) on CodePen.
See the Pen Uploading circle color example #2by uploadcare (@uploadcare) on CodePen.
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.
See the Pen Uploaded image preview example #1by uploadcare (@uploadcare) on CodePen.
You have full control of size and position, it can be changed via CSS.
Image preview for multiupload widget may look different:
See the Pen Uploaded image preview example #2by uploadcare (@uploadcare) on CodePen.
You can choose different images or just rearrange existing ones: all changes in widget will be reflected in the thumbnail list.