Is it possible to change widget's appearance?

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,

Check it live

Crazy Button

Time for some fun, CSS can really drive your buttons crazy,

Check it live

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.

Live demo 1

Live demo 2

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 uploadProgress.

The following installProgressBar function does all that. It receives the two arguments: widget instance and progress bar DOM element. Everything else runs on CSS, animation included.

Live demo

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.

Check it live

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:

Check it live

You can change the displayed images or rearrange the existing ones; all changes will then be reflected in the thumbnail list.