File uploader that cares for your users

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

Select a framework
Start now for freeGet a demo
<lr-file-uploader-regular
  css-src="https://unpkg.com/@uploadcare/blocks@0.22.7/web/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

BufferMetaZapierMozillaIndeedDeloitte

Built-in image editor

Raise the quality of user-generated content by providing 9 creative tools.

CropRotateMirrorFlipEnhanceSharpenBlurGrayscaleInvert
Widget image editor CROP ROTATE MIRROR FLIP ENHANCE SHARPEN BLUR GRAYSCALE INVERT

12 external sources

Let your users quickly pick their Instagram photos or Google Drive documents.

  • Choose as many as you need
  • API for building custom sources
Mobile uploads 100X more reliable. Filelink instantly available. Widget upload sources

Accelerated uploading

Uploadcare widget is backed by global high performance infrastructure

  • Network of acceleration nodes
  • Multipart uploading
Widget speed comparison

Integrated storage and
Content Delivery Network

You don’t have to worry about origin and edge relationships. All files are uploaded to integrated storage, ensuring they are organized and secure and automatically get cached on CDN.

The Uploadcare Smart CDN is rock-solid and lightning-fast in both directions

Lots of features in a compact package

Start now for freeGet a demo

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

Designed for developers

Install File Uploader using one of the following packages:

JavaScript

Install library

Install the npm package:


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

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://esm.sh/@uploadcare/blocks@0.22.7/web/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.22.7

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://esm.sh/@uploadcare/blocks@0.22.7/web/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.22.7

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://esm.sh/@uploadcare/blocks@0.22.7/web/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.22.7

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://esm.sh/@uploadcare/blocks@0.22.7/web/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.22.7

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://esm.sh/@uploadcare/blocks@0.22.7/web/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.

See examples ->

Mobile SDKs

Use native mobile libraries for iOS and Android to upload files.

Upload API

Upload files RESTfully with Upload API.

JavaScript API client

Build custom uploading flow using API client for JS.

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
© 2011–2023 Uploadcare Inc.
Burrard St, Vancouver, BC V7X 1M8, Canada
Request status
SOC 2 Type 2 compliantGDPR compliantHIPAA-compliant environment