File Uploader Configuration

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

Uploadcare Widget is highly customizable through widget options. Most of the options can be set in one of the ways listed below. You can also implement mixed settings, i.e., when having multiple widgets; their general behavior can be set using global variables while some of them may run based on local attributes.

You can set widget options in the following ways:

Note, our live config will also provide you with ready-made code snippets holding all the set options as local attributes.

Global variables

Globals are specified as global JavaScript variables in your <script> tag. For example,

<script>
  UPLOADCARE_PUBLIC_KEY = 'demopublickey';
  UPLOADCARE_LOCALE = 'ru';
</script>

Local attributes

Local options are specified in the target <input> tag as data-* attributes. For example,

<input type="hidden" role="uploadcare-uploader"
  data-public-key="demopublickey"
  data-images-only
/>

Settings object

Most of the widget options can also be set within the settings object. See our JavaScript API reference for details. For example,

uploadcare.openDialog(null, {
  publicKey: 'demopublickey',
  imagesOnly: true,
  crop: '300x200'
});

Setting boolean options

All boolean options are set globally with their JavaScript boolean values.

UPLOADCARE_CLEARABLE = true;
UPLOADCARE_PREVIEW_STEP = false;

When setting boolean options locally in HTML tag attributes, any value is interpreted as true, even an empty one. However, when setting local options to false, the respective value should strictly be either "false" or "disabled".

Setting local options to true,

<input data-option="data-option" />
<input data-option="true" />
<input data-option="" />
<input data-option />

Setting local options to false,

<input data-option="false" />
<input data-option="disabled" />

Questions?

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.