Skip to main content

File uploads made simple and powerful

Add file uploads to your app with a stack-agnostic library. Upload from multiple sources, process images on-the-fly, and customize everything to fit your needs.

Get StartedAPI Reference
Uploadcare File Uploader Interface

Get started in minutes

Install the library and add your first file uploader

1

Install the package

Install the Uploadcare File Uploader via npm, yarn, or pnpm:
npm install @uploadcare/file-uploader
Or use it directly from a CDN:
<script type="module">
  import * as UC from 'https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@1/web/file-uploader.min.js';
  UC.defineComponents(UC);
</script>
2

Get your API key

Sign up for a free Uploadcare account and get your Public API key from the project dashboard.
3

Add the uploader to your page

Import the components and add the uploader to your HTML:
import * as UC from '@uploadcare/file-uploader';

UC.defineComponents(UC);

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@1/web/uc-file-uploader-regular.min.css"
/>

<uc-config ctx-name="my-uploader" pubkey="YOUR_PUBLIC_KEY"></uc-config>
<uc-file-uploader-regular ctx-name="my-uploader"></uc-file-uploader-regular>
Replace YOUR_PUBLIC_KEY with your actual Uploadcare public key. The uploader is now ready to use!

Key features

Everything you need for modern file uploads

Multiple upload sources

Upload from local device, URL, camera, Dropbox, Google Drive, and more

Image editing

Built-in editor with cropping, filters, and transformations

Large file handling

Chunked uploads with resumable transfers for files of any size

Framework agnostic

Web Components work with React, Vue, Angular, Svelte, or vanilla JS

TypeScript support

Full type definitions with autocompletion and type checking

Customizable UI

Pre-built themes or customize with CSS to match your brand

File validation

Validate file types, sizes, and content before upload

Secure uploads

Signed uploads and secure delivery for protected content

Localization

Support for 30+ languages with custom locale definitions

Choose your solution

Pick the uploader that fits your use case

📁

File Uploader Regular

Full-featured modal uploader with all sources and options

Learn more
📋

File Uploader Inline

Embedded uploader that fits seamlessly into your page layout

Learn more
⚡

File Uploader Minimal

Lightweight uploader for simple use cases with minimal UI

Learn more
🎨

Cloud Image Editor

Standalone image editor with cropping, filters, and enhancements

Learn more

Framework integration

Works seamlessly with your favorite framework

React

Use File Uploader in React applications

Next.js

Server and client components for Next.js

Vue

Vue 3 integration with Composition API

Angular

Angular components and modules

Svelte

Svelte components and actions

JavaScript

Vanilla JavaScript with no framework

Ready to get started?

Follow our quickstart guide and add file uploads to your application in minutes.

Start building

Build docs developers (and LLMs) love

Get started for freeTalk to us