File uploader that cares for your users

Open source, infinitely customizable file uploading widget powered by the robust global infrastructure.

Select a framework
<lr-file-uploader-regular
  css-src="https://cdn.jsdelivr.net/npm/@uploadcare/blocks@0.25.6/web/lr-file-uploader-regular.min.css">
</lr-file-uploader-regular>

<style>
  lr-file-uploader-regular {
    --ctx-name: 'my-uploader';
    --cfg-pubkey: 'demopublickey';
    --darkmode: 1;
    --h-accent: 278;
    --s-accent: 100%;
    --l-accent: 61%;
  }
</style>
Uploading 3 files...Feathers photo by David Clode.heicAgreement #140873.pdfSurfing May 2022 GoPro.movDoneAdd moreClear
Accent color
Simply choose mode and accent color and you’re ready to go. Or dive deeper into unlimited CSS styling. Documentation

10,000+ developer teams trust uploadcare

PandaDoc logoJasper logoShogun logoBuffer logoGempages logoZapier logo
Widget image editor CROP ROTATE MIRROR FLIP ENHANCE SHARPEN BLUR GRAYSCALE INVERT
Mobile uploads 100X more reliable. Filelink instantly available. Widget upload sources
Widget speed comparison
The Uploadcare Smart CDN is rock-solid and lightning-fast in both directions

Lots of file upload features in a compact package

Any device

Responsive out of the box. All controls are easily accessible on any screen.

Customization

Deep customization with CSS and 24 ready-made localizations and API clients

Lightweight

No heavy dependencies, modern and efficient technologies under the hood.

Any size any type

From userpics to lossless video, the widget will transfer any format up to 5 TB.

Whitelabeling

Rebrand File uploader, get custom CNAME for the uploading endpoint and CDN.

Security

Get full control of where uploads are coming from and who can access and handle these files.

Integration

File Uploader designed for developers

Install uploader using one of the following packages:

JavaScript

Install library

Install the npm package:

npm i --save-exact @uploadcare/blocks@0.25.6

Import, then use registerBlocks function to register blocks:

import * as LR from "@uploadcare/blocks";

LR.registerBlocks(LR);

Configure

Add the configuration values to your CSS code:

.my-config {
  --cfg-pubkey: "ba8f9a5a983f2f4cffbc";
  --cfg-img-only: 1;
  --cfg-multiple: 1;
  --cfg-max-local-file-size-bytes: 524288000;
  --cfg-use-cloud-image-editor: 1;
  --cfg-source-list: "local, url, camera, dropbox";
  --darkmode: 0;
  --h-accent: 223;
  --s-accent: 100%;
  --l-accent: 61%;
}

Put on page

Now your uploader is ready to be placed into your HTML:

<lr-file-uploader-regular
    css-src="https://cdn.jsdelivr.net/npm/@uploadcare/blocks@0.25.6/web/lr-file-uploader-regular.min.css"
    ctx-name="my-uploader"
    class="my-config"
>
</lr-file-uploader-regular>

That’s it for the basics. See the docs for advanced configuration options:

  • All configuration parameters
  • Listening to events
  • Deep customization and theming
  • Working with individual blocks
Blocks documentation
React

Install library

Install the npm package:

npm i --save-exact @uploadcare/blocks@0.25.6

Import, then use registerBlocks function to register blocks:

import * as LR from "@uploadcare/blocks";

LR.registerBlocks(LR);

Add the following line to the tsconfig.json in case you are using Typescript:

"types": ["@uploadcare/blocks/types/jsx"]

Configure

Add the configuration values to your CSS code:

.my-config {
  --cfg-pubkey: "ba8f9a5a983f2f4cffbc";
  --cfg-img-only: 1;
  --cfg-multiple: 1;
  --cfg-max-local-file-size-bytes: 524288000;
  --cfg-use-cloud-image-editor: 1;
  --cfg-source-list: "local, url, camera, dropbox";
  --darkmode: 0;
  --h-accent: 223;
  --s-accent: 100%;
  --l-accent: 61%;
}

Put on page

Now your uploader is ready to be placed into your HTML:

<lr-file-uploader-regular
    css-src="https://cdn.jsdelivr.net/npm/@uploadcare/blocks@0.25.6/web/lr-file-uploader-regular.min.css"
    ctx-name="my-uploader"
    class="my-config"
>
</lr-file-uploader-regular>

That’s it for the basics. See the docs for advanced configuration options:

  • All configuration parameters
  • Listening to events
  • Deep customization and theming
  • Working with individual blocks
Blocks documentationCodeSandbox example
Svelte

Install library

Install the npm package:

npm i --save-exact @uploadcare/blocks@0.25.6

Import, then use registerBlocks function to register blocks:

import * as LR from "@uploadcare/blocks";

LR.registerBlocks(LR);

Configure

Add the configuration values to your CSS code:

.my-config {
  --cfg-pubkey: "ba8f9a5a983f2f4cffbc";
  --cfg-img-only: 1;
  --cfg-multiple: 1;
  --cfg-max-local-file-size-bytes: 524288000;
  --cfg-use-cloud-image-editor: 1;
  --cfg-source-list: "local, url, camera, dropbox";
  --darkmode: 0;
  --h-accent: 223;
  --s-accent: 100%;
  --l-accent: 61%;
}

Put on page

Now your uploader is ready to be placed into your HTML:

<lr-file-uploader-regular
    css-src="https://cdn.jsdelivr.net/npm/@uploadcare/blocks@0.25.6/web/lr-file-uploader-regular.min.css"
    ctx-name="my-uploader"
    class="my-config"
>
</lr-file-uploader-regular>

That’s it for the basics. See the docs for advanced configuration options:

  • All configuration parameters
  • Listening to events
  • Deep customization and theming
  • Working with individual blocks
Blocks documentationCodeSandbox example
Vue

Install library

Install the npm package:

npm i --save-exact @uploadcare/blocks@0.25.6

Import, then use registerBlocks function to register blocks:

import * as LR from "@uploadcare/blocks";

LR.registerBlocks(LR);

In order to use Blocks in Vue, you need to inform Vue that certain elements should be recognized as custom elements. This is achieved by setting thecompilerOptions.isCustomElement property to a function that specifies which tags should be treated as custom element. Since all Blocks elements are prefixed with lr-, you could set

compilerOptions.isCustomElement = (tag) => tag.startsWith("lr-");

For further information on custom elements, please refer to the Vue documentation.

Configure

Add the configuration values to your CSS code:

.my-config {
  --cfg-pubkey: "ba8f9a5a983f2f4cffbc";
  --cfg-img-only: 1;
  --cfg-multiple: 1;
  --cfg-max-local-file-size-bytes: 524288000;
  --cfg-use-cloud-image-editor: 1;
  --cfg-source-list: "local, url, camera, dropbox";
  --darkmode: 0;
  --h-accent: 223;
  --s-accent: 100%;
  --l-accent: 61%;
}

Put on page

Now your uploader is ready to be placed into your HTML:

<lr-file-uploader-regular
    css-src="https://cdn.jsdelivr.net/npm/@uploadcare/blocks@0.25.6/web/lr-file-uploader-regular.min.css"
    ctx-name="my-uploader"
    class="my-config"
>
</lr-file-uploader-regular>

That’s it for the basics. See the docs for advanced configuration options:

  • All configuration parameters
  • Listening to events
  • Deep customization and theming
  • Working with individual blocks
Blocks documentationCodeSandbox example
Angular

Install library

Install the npm package:

npm i --save-exact @uploadcare/blocks@0.25.6

Import, then use registerBlocks function to register blocks:

import * as LR from "@uploadcare/blocks";

LR.registerBlocks(LR);

To use Blocks, which are built on custom elements, you must inform Angular of their usage. This is achieved by setting the schema property of @NgModule to CUSTOM_ELEMENTS_SCHEMA like this:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { UploaderComponent } from './uploader.component';

@NgModule({
    declarations: [UploaderComponent],
    imports: [BrowserModule],
    providers: [],
    bootstrap: [UploaderComponent],
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class UploaderModule {}

For further information on schemas, please refer to the Angular documentation.

Configure

Add the configuration values to your CSS code:

.my-config {
  --cfg-pubkey: "ba8f9a5a983f2f4cffbc";
  --cfg-img-only: 1;
  --cfg-multiple: 1;
  --cfg-max-local-file-size-bytes: 524288000;
  --cfg-use-cloud-image-editor: 1;
  --cfg-source-list: "local, url, camera, dropbox";
  --darkmode: 0;
  --h-accent: 223;
  --s-accent: 100%;
  --l-accent: 61%;
}

Put on page

Now your uploader is ready to be placed into your HTML:

<lr-file-uploader-regular
    css-src="https://cdn.jsdelivr.net/npm/@uploadcare/blocks@0.25.6/web/lr-file-uploader-regular.min.css"
    ctx-name="my-uploader"
    class="my-config"
>
</lr-file-uploader-regular>

That’s it for the basics. See the docs for advanced configuration options:

  • All configuration parameters
  • Listening to events
  • Deep customization and theming
  • Working with individual blocks
Blocks documentationCodeSandbox example

Seamless integration flow for all major web development stacks. Type safety with a JSDoc declaration and TypeScript static analysis. Build custom uploading flow using Upload API directly or with an API client. Use native mobile libraries for iOS and Android to upload files.

Unified platform

Cover the entire file lifecycle with a single platform

Leverage from using the whole Uploadcare platform:
  • Easily upload files from your web application using API
  • Sleek HTML file upload widget
  • Support public and private file
  • Lightning-fast content delivery via Uploadcare’s multi-vendor CDN
  • Real-time image processing via URL API
  • 40+image transformations: resize, crop, rotate, remove background, apply watermarks and much more