From CDN

We recommend using the one of the modern code distribution services, such as:

Inserting the following code into the <head> section of your HTML document:

or import it directly into your JavaScript code:

<script type="module">
    import * as LR from "";

From NPM

Install the npm package:

npm i @uploadcare/blockssh

Then you can use the File Uploader and build your own solutions from the source code:

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


Dynamic script connection

There is an alternative way if your project meets the following criteria:

  • Does not support new language features (such as nullish coalescing operator, static class properties) — for instance, this might apply to projects built with frameworks such as Nuxt 2. (Note that Nuxt 3 supports modern JavaScript features and works as needed);
  • Has SSR and does not support node conditional exports;

Then you can use this workaround to import the uploader only at the browser runtime, bypassing your project's build system and obtaining a working type system. This can be achieved without the need to manually configure the build process (using tools such as Babel) or disabling SSR for a specific package.

First, install the npm package:

npm i --save-exact @uploadcare/blockssh

Then import connectBlocksFrom function to connect the library dynamically and avoid errors:

import { connectBlocksFrom } from '@uploadcare/blocks/abstract/connectBlocksFrom.js';


You may need to implement some logic that depends on connected uploader or get access directly to the imported components. Since connectBlocksFrom returns Promise, use .then()

import { connectBlocksFrom } from '@uploadcare/blocks/abstract/connectBlocksFrom.js';

const STYLES = '';

  (blocks) => {
    if (!blocks) {
      return; // To avoid errors in SSR case

    // Now you can realize your logic, e.g.:
    const uploader = new blocks.FileUploaderRegular();
    uploader.setAttribute('css-src', STYLES);

Choose a solution

To use the File Uploader in your application markup, select the tag that best fits your needs from the table below and place it in your HTML document:

Regular mode<lr-file-uploader-regular></lr-file-uploader-regular>
Inline mode<lr-file-uploader-inline></lr-file-uploader-inline>
Minimal mode<lr-file-uploader-minimal></lr-file-uploader-minimal>

Look at the File Uploader solutions for more.



where css-src is basic CSS styles, and my-config is a class which contains settings variables. File Uploader will use them as configuration properties. Take a look at uploader configuration.