> For the complete documentation index, see [llms.txt](https://docs.klai.studio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.klai.studio/reference/components-overview/uploading-files/uploadcare.md).

# 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](https://www.uploadcare.com/)
2. Add your API public key into the schema
3. Uploaded file data is found in the `model` key.

## Key Properties

| Key                        | Value(s)     | Type   | Description                                                                       |
| -------------------------- | ------------ | ------ | --------------------------------------------------------------------------------- |
| `type`                     | `uploadcare` | string | Identifies the Uploadcare element                                                 |
| `model`                    |              | string | Data model key that will receive the uploaded file info array                     |
| `options`                  | `{}`         | object | Options passed directly into the Uploadcare widget                                |
| `globals`                  | `{}`         | object | Global Uploadcare settings written onto `window` before the widget is initialized |
| `onUploadComplete_actions` | `[]`         | array  | Actions 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.

```
// 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"
}
```