uploadcaredocs

File Uploader Embed

  • This documentation is for the version 3.6.2 of the widget. If you’re looking for the widget v2 docs, check here.

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>
<script>uploadcare.openPanel('#uploader-placeholder');</script>

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.

Uploading. Please wait...

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;
}
.uploadcare--tab_name_favorites {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  overflow: auto;
}
.favorite-files-image {
  width: 140px;
  height: 140px;
  margin: 10px;
  padding: 5px;
  color: rgba(0,0,0,.4);
  box-shadow: 0 6px 20px -3px;
  cursor: pointer;
}
.favorite-files-image:hover {
  color: rgba(0,100,200,.5);
}
Uploading. Please wait...

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.

We’re always happy to help with code, integration, and other stuff. Search our site for more info or post your question in our Community Area.