File Uploader Embed

  • This is for the version 3.x of the widget. If you're looking for the widget v2 docs, check here
  • Here’s how you migrate from v2 to v3.

We get that user experience matters and provide a good number of widget customization options that cover both widget appearance and behavior.

The look of the widget can be changed via CSS, and our live config is a great starting point for controlling how your widget behaves.

Another thing you can do is embedding the widget in your page by switching from the widget dialog to panel.

Embed File Uploader Using Panel

The default behavior is when the widget dialog appears on pushing a button. This covers the rest of your page with a semi-transparent background. It is a good fit when you use the widget to fill in a single form field out of many.

However, when the purpose of your page is getting user-generated content, there is a sense in showing the widget on a page without any preceding clicks or taps. The thing is called panel.

<div id="uploader-placeholder">Uploading. Please wait...</div>

The snippet above replaces your DOM element with the uploadcare-placeholder id and puts it in place once a user selects a file. This can be used to show some indication of the uploading process, for instance. Also, unlike the dialog, widget panel can be closed by simply selecting a file.

Panel Styling

Same as the widget dialog, panel can be customized.

Here is an example of customizing your widget embed. Say, you don’t like its look because of the sharp border. The appearance of your embed can be changed via CSS. It goes like this,

#uploader-styling {
  margin-top: 10px;
#uploader-styling .uploadcare--panel,
#uploader-styling .uploadcare--menu__item,
#uploader-styling .uploadcare--menu__items {
  background-color: transparent;
  border: 0;
#uploader-styling .uploadcare--panel {
  flex-direction: column;
#uploader-styling .uploadcare--menu {
  width: 100%;
  height: 60px;
  min-height: 60px;
#uploader-styling .uploadcare--menu__items {
  padding-right: 0;
  flex-direction: row;

Some of the dialog elements are rendered to iframes from our servers which does not allow any CSS customization. However, we provide a set of specific methods to inject CSS into iframes.