Migrating Uploadcare Widget From v2 to v3
Uploadcare Widget v2 is in many aspects compatible with v3:
However, v3 has many changes related to the HTML markup and styles of the widget.
Also, we’ve completely removed external
.png files like
firstname.lastname@example.org: instead, we use SVG.
You can always check out the complete widget changelog here. If you’re willing to learn more about installing Uploadcare Widget, check out our docs.
HTML markup of widget UI
With Uploadcare Widget v3 we used the classical BEM methodology.
BEM (Block, Element, Modifier) is a component-based approach to web development.
UI of the widget, therefore, was divided into independent blocks,
All classes now have the
Since we’ve implemented many changes, you might first want to take a look at the stylesheets under the blocks folder. This will update you on all kinds of redesigned blocks and elements.
Also, you can drop us a line: we’ll gladly answer your questions.
The widget now has the
uploadcare--widget class instead of the
The widget has also a
uploadcare--widget_status_* class for different states:
The buttons inside the widget are
div now with
uploadcare--widget__button and also can be on of three type:
These elements are now parts of the widget:
When a file gets uploaded (widget is switched to the
When the dialog is opened, the
uploadcare--page class is added to
instead of the
The dialog now has the
uploadcare--dialog class instead of the
uploadcare-responsive-panel class removed, the dialog is responsive by default.
The different dialog states (
are now defined within
Here are the elements that the dialog contains:
uploadcare--dialog__close— the button in the top right corner (closes the dialog) (v2:
The panel is the main block holding the menu, tabs and content.
When you call
your placeholder is replaced with the panel.
The panel now has the
uploadcare--panel class instead of the
If panel is inside the dialog, it also has the
The panel contains the following elements:
If the widget doesn’t have tabs, the
panel__menu element has the
If you turn the
multiple option on,
the panel has the
uploadcare--panel_multiple class (v2:
and contains the following elements:
The menu now has the
uploadcare--menu class instead of the
The menu contains the following elements:
The tab now has the
uploadcare--tab class instead of the
The tab contains the following elements:
The file now has the
uploadcare--file class instead of the
The different file states are now defined within
The file contains the following elements:
As it was already mentioned above, we implemented lots of changes into the widget markup. In this article, we described the most significant ones, not all of them. Check out our templates and stylesheets folders for more details. Or, contact our support in case of any specific issues.
All styles have been rewritten. We use flexbox for layout and PostCSS for post processing. See our stylesheets folder and PostCSS config for more details.
We quit using PNG files. Instead, we now use SVG sprites inside
For example, here’s the Facebook icon for the menu:
<svg width="32" height="32" role="presentation" class="uploadcare--icon uploadcare--menu__icon"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#uploadcare--icon-facebook"></use> </svg>html
Or, the “Remove” button that appears in the list of files when the multiple option is turned on:
<svg role="presentation" width="32" height="32" class="uploadcare--icon"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#uploadcare--icon-remove"></use> </svg>html