> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://uploadcare.com/docs/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://uploadcare.com/docs/_mcp/server.

# JavaScript File Uploader

> Integrate Uploadcare File Uploader into a plain JavaScript app.

Use this integration when you want to work directly with Web Components in a plain JavaScript or vanilla HTML app.

## Minimal setup

1. Install the package:

```bash
npm install @uploadcare/file-uploader
```

2. Register components and include styles in your entry file.

3. Add `uc-config`, an uploader component, and `uc-upload-ctx-provider` to your page.

Read setup details in:

* [Installation](/docs/file-uploader/installation/)
* [Configuration](/docs/file-uploader/configuration/)

## Examples

* [JavaScript example (GitHub)](https://github.com/uploadcare/file-uploader-examples/tree/main/examples/js-uploader)

[![Play with CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/devbox/github/uploadcare/file-uploader-examples/tree/main/examples/js-uploader)

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/uploadcare/file-uploader-examples/tree/main/examples/js-uploader)

This example includes:

* minimal uploader
* regular uploader
* headless regular uploader with custom trigger
* custom Unsplash source plugin usage

## Related File Uploader docs

* [Overview](/docs/file-uploader/)
* [Events](/docs/file-uploader/events/)
* [API](/docs/file-uploader/api/)
* [Styling](/docs/file-uploader/styling/)
* [Plugin API](/docs/file-uploader/plugins/)

## Notes and pitfalls

* Make sure `UC.defineComponents(UC)` runs before custom elements are used.
* If you integrate custom source plugins, use the [Plugin API example](/docs/file-uploader/plugins/example/) as a reference.
* For secure upload flows, review [Security settings](/docs/file-uploader/security/).