Yes, it’s possible. You can customize the widget’s appearance by overriding its CSS classes.
The File Uploader is thoroughly annotated with CSS classes. That’s your starting point with deeper customization. You can find a class for every widget item by inspecting its elements or sifting through the widget source code.
Also, our widget is designed to organically inherit styles from your page: dialog elements get scaled in line with your font size.
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,
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 to the
onChange event. Its callback’s argument 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
installProgressBar function does all that. It receives the two arguments: widget instance and progress bar DOM element. Everything else runs on CSS, animation included.
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 ones; all changes will then be reflected in the thumbnail list.