Data Types

Upload Widget: Configuration

This configuration object can be passed to the method, or to the options parameter on our framework components.

For example:

const uploader = Uploader({ apiKey: "free" }); // Replace "free" with your API key.
// Example 1: without a framework{ maxFileCount: 1 });
// Example 2: with a framework ('react-uploader' in this case)
<UploadDropzone uploader={uploader} options={{ maxFileCount: 1 }} />

All fields are optional:

"editor": {
"images": {
"crop": true,
"cropRatio": 1,
"cropShape": "circ",
"preview": true
"layout": "modal",
"maxFileCount": 1,
"maxFileSizeBytes": 10485760,
"metadata": {
"myCustomField1": true,
"myCustomField2": {
"hello": "world"
"anotherCustomField": 42
"mimeTypes": [
"multi": false,
"onInit": Function,
"onUpdate": Function,
"onValidate": Function,
"path": {
"fileName": "image.jpg",
"fileNameFallback": "image.jpg",
"fileNameVariablesEnabled": true,
"folderPath": "/uploads",
"folderPathVariablesEnabled": true
"showFinishButton": true,
"showRemoveButton": true,
"styles": {
"colors": {
"active": "#528fff",
"error": "#d23f4d",
"primary": "#377dff",
"shade100": "#333",
"shade200": "#7a7a7a",
"shade300": "#999",
"shade400": "#a5a6a8",
"shade500": "#d3d3d3",
"shade600": "#dddddd",
"shade700": "#f0f0f0",
"shade800": "#f8f8f8",
"shade900": "#fff"
"fontFamilies": {
"base": "-apple-system, blinkmacsystemfont, Segoe UI, helvetica, arial, sans-serif"
"fontSizes": {
"base": 16
"tags": [

Tip: to remove the image cropper set crop: false

See details: UploadWidgetConfig

Was this section helpful? Yes No

You are using an outdated browser.

This website requires a modern web browser -- the latest versions of these browsers are supported: