Skip to content

uploadCare ​

uploadCare gives you file uploads, media processing, and adaptive delivery for web and mobile by providing a widget allowing multiple file uploads from various sources including social media.

See UploadCare for more detailed information https://uploadcare.com/

The component is based on UploadCares JS widget.
Documentation: https://uploadcare.com/docs/api_reference/javascript/

Version: > 0.8.18

Usage ​

  1. Register for a free account at www.uploadcare.com
  2. Add your API public key into the schema
  3. Uploaded file data is found in the model key.

Key Properties ​

KeyValue(s)TypeDescription
typeuploadcarestringIdentifies the Uploadcare element
modelstringData model key that will receive the uploaded file info array
options{}objectOptions passed directly into the Uploadcare widget
globals{}objectGlobal Uploadcare settings written onto window before the widget is initialized
onUploadComplete_actions[]arrayActions to run after the upload completes

Notes: ​

Not all of UploadCare's options setting ar available as options.someOption keys, some are only available as global variables. To handle this BetterForms adds provision for adding both GLOBAL and JS options. See options documentation for what ones are supported under what key.

Fully read the UploadCare documentation before posting support requests.

onUploadComplete_actions is the user-facing schema key. BetterForms translates it into the runtime onUploadComplete callback internally.

text
// Example
{
    "globals": {
        "UPLOADCARE_CLEARABLE": true,
        "UPLOADCARE_LOCALE_TRANSLATIONS": {
            "buttons": {
                "choose": {
                    "files": {
                        "other": "Add Files"
                    }
                }
            }
        }
    },
    "model": "newFiles",
    "onUploadComplete_actions": [{
        "action": "runUtilityHook",
        "options": {
            "type": "add"
        }
    }],
    "options": {
        "crop": true,
        "multiple": true,
        "publicKey": "922fff6657dc1ae880be"
    },
    "styleClasses": "col-md-2",
    "type": "uploadcare"
}

Klai Studio documentation