@uploadcare/file-uploader

Website • Docs • Blog • Discord • Twitter

Uploadcare File Uploader

Add file uploads to your app and configure behavior and appearance as needed. Process and transform files before and after uploading. Compatible with any framework or environment.

Features

• Multiple upload sources: Drop files, select from the filesystem, use a link, camera, Dropbox, Google Drive, add them via the upload API, and more.
• Large file handling: Upload faster with chunking, retries, and resumable uploads.
• Customizable appearance: Use pre-built themes or modify styles with CSS to fit your project.
• Responsive and cross-browser: Fits any device; supports the latest desktop and mobile versions of Chrome, Edge, Firefox, Opera, and Safari.
• Fully accessible: A11Y options, including keyboard navigation, screen reader support, and color contrast settings.
• Advanced image editing: Optimize images and apply smart transformations like cropping, resizing, or color filters via the built-in image editor, REST, or URL API.
• Secure uploads: Protect your app by automatically detecting inappropriate content, malicious files, or unauthorized uploads.
• Typescript support: Full Typescript support with autocompletion, type checking, and more for a better developer experience.

Framework support

Uploadcare File Uploader is built with Web Components, meaning you can integrate it into any environment—no adapters required.

For hands-on examples, visit our live sandboxes:

• React
• Next.js
• JavaScript
• Angular
• Vue
• Svelte

Check out the documentation for quickstart guides tailored to your framework or tool.

Explore more tutorials in our blog.

Quick Start

From CDN

• Connect File Uploader directly from your document:

<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>

• Add File Uploader in your application markup:

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

<uc-file-uploader-regular ctx-name="my-uploader"> </uc-file-uploader-regular>

• Configure File Uploader and add your personal public key to the project. Learn more.

From NPM

• Install the package: npm i @uploadcare/file-uploader
• Connect File Uploader from your script file:

import * as UC from '@uploadcare/file-uploader';

UC.defineComponents(UC);

• Add File Uploader in your application markup:

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

<uc-file-uploader-inline ctx-name="my-uploader"> </uc-file-uploader-inline>

• Configure File Uploader and add your personal public key to the project. Learn more.

Configuration

All configurations in File Uploader are managed from uc-config block.

• Sign up to Uploadcare.
• Get a Public API key in Uploadcare project's dashboard.
• Add a uc-config block to your markup and replace YOUR_PUBLIC_KEY with your own public key:

<uc-config ctx-name="my-uploader" pubkey="YOUR_PUBLIC_KEY"></uc-config>

• Make sure that your config uses the same ctx-name attribute value as your solution block.

Discover more about configuration options in our documentation.

Browser support

Latest desktop and mobile stable versions of Chrome, Edge, Firefox, Opera, and Safari are supported.

Internet Explorer is outdated and not supported anymore.

Quality Insights

Quality Insights is a plugin for File Uploader that helps us better understand how the uploader is used: which features are enabled, which scenarios occur most frequently, and how the upload process works overall.

Special attention is given to collecting error data - this allows us to quickly identify and resolve issues, improving the stability and reliability of the uploader. All collected data is non-personal, does not identify individual users, and is never shared with external services. The information is used only within the product to set development priorities and enhance user convenience.

Contribution

You’re always welcome to contribute:

• Create issues every time you feel something is missing or goes wrong.
• Provide your feedback or drop us a support request at [e-mail].
• Ask questions on Stack Overflow with "uploadcare" tag if others can have these questions as well.
• Fork project, make changes and send it as pull request. For launching the developing mode follow these commands:
  • Install dependencies: npm install.
  • Start local dev-server: npm run dev.
• Star this repo if you like it ⭐️