Data Types

UploadWidgetConfig

The configuration object passed to the Upload Widget's open() method has this structure:

{
"apiKey": "public_A623uY2RvnNq1vZ80fYgGyhKN0U7",
"editor": {
"images": {
"allowResizeOnMove": true,
"crop": true,
"cropFilePath": Function,
"cropRatio": 1,
"cropShape": "circ",
"preview": true
}
},
"layout": "modal",
"locale": {
"addAnotherFileBtn": "Add another file...",
"addAnotherImageBtn": "Add another image...",
"cancelBtn": "cancel",
"cancelBtnClicked": "cancelled",
"cancelPreviewBtn": "Cancel",
"continueBtn": "Continue",
"cropBtn": "Crop",
"customValidationFailed": "Failed to validate file.",
"doneBtn": "Done",
"fileSizeLimitPrefix": "File size limit:",
"finishBtn": "Finished",
"finishBtnIcon": true,
"imageCropNumberPrefix": "Image",
"maxFilesReachedPrefix": "Maximum number of files:",
"maxImagesReachedPrefix": "Maximum number of images:",
"orDragDropFile": "...or drag and drop a file.",
"orDragDropFileMulti": "...or drag and drop files.",
"orDragDropImage": "...or drag and drop an image.",
"orDragDropImageMulti": "...or drag and drop images.",
"processingFile": "Processing file...",
"removeBtn": "remove",
"removeBtnClicked": "removed",
"submitBtnError": "Error!",
"submitBtnLoading": "Please wait...",
"unsupportedFileType": "File type not supported.",
"uploadFileBtn": "Upload a File",
"uploadFileMultiBtn": "Upload Files",
"uploadImageBtn": "Upload an Image",
"uploadImageMultiBtn": "Upload Images",
"xOfY": "of"
},
"maxFileCount": 1,
"maxFileSizeBytes": 10485760,
"metadata": {
"myCustomField1": true,
"myCustomField2": {
"hello": "world"
},
"anotherCustomField": 42
},
"mimeTypes": [
"image/jpeg"
],
"multi": false,
"onInit": Function,
"onPreUpload": Function,
"onUpdate": Function,
"path": {
"fileName": "image.jpg",
"fileNameFallback": "image.jpg",
"fileNameVariablesEnabled": true,
"folderPath": "/uploads",
"folderPathVariablesEnabled": true
},
"showFinishButton": true,
"showRemoveButton": true,
"styles": {
"breakpoints": {
"fullScreenHeight": 420,
"fullScreenWidth": 750
},
"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": [
"example_tag"
]
}

Public API key (can be used in frontend code).

Example: "public_A623uY2RvnNq1vZ80fYgGyhKN0U7"

Type: String

Length: 35

Note: you should omit this setting when using a framework wrapper, e.g. React, Angular, Vue or jQuery.

The container element to render the widget in.

Supported values:

string: a DOM selector for an existing element on the page, e.g. "body" or "#container".

object: a DOM element.

Only add this property if layout is set to "inline".

Image editor options for the Upload Widget.

Type: UploadWidgetEditor

Note: you should omit this setting when using a framework wrapper, e.g. React, Angular, Vue or jQuery.

If "modal" is used, then the Upload Widget will render as a modal when open() is called.

If "inline" is used, then the Upload Widget will render as an inline dropzone when open() is called.

If "inline" is used, then you must set the container property to point to the element you want to render the dropzone widget inside.

Default: "modal"

Type: String

Allowed Values: "inline", "modal"

Text to appear in the Upload Widget's buttons and other UI elements. Defaults to the EN/US locale.

Type: UploadWidgetLocale

Maximum number of files allowed.

Default: infinity if multi=true

Type: Number

Maximum file size allowed.

Default: infinity

Type: Number

Arbitrary JSON to store against the uploaded file(s) as metadata.

You can retrieve this later via a GetFileDetails request.

Type: FileMetadata

File type filter.

Example: ["image/jpeg"]

Type: String[]

Enables/disables multiple file uploads.

Default: false

Type: Boolean

Callback taking a parameter of type UploadWidgetMethods.

Fired once when the widget is first displayed.

Type: Function

Callback taking a DOM File object.

Fired before each file upload.

Can be used to validate and/or transform the file before uploading it.

Returns a Promise of UploadWidgetOnPreUploadResult.

Type: Function

Callback taking a parameter of type UploadWidgetOnUpdateEvent.

Fired each time a file is uploaded or removed.

Type: Function

The path to upload the file(s) to.

Type: FilePathDefinition

Shows/hides the 'finish' button, which is displayed after files are uploaded.

If showFinishButton = false, multi = false, and layout = "modal", then the modal will close immediately after the file is uploaded (instead of showing the file to the user).

Default: true

Type: Boolean

Shows/hides the 'remove' button, which is displayed next to each file after it's uploaded.

Default: true

Type: Boolean

Styling options for the Upload Widget.

Type: UploadWidgetStyles

The tags you specify here determine which rules will be executed for the upload(s).

You create rules in the Bytescale Dashboard, and choose which tags trigger each rule.

Rules include: max file size checks, traffic limit checks, rate limit checks, etc.

Example: ["example_tag"]

Type: String[]

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: