Installation

From CDN

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

https://jsdelivr.com/
https://esm.sh/
https://skypack.dev/
etc

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

<script src="https://cdn.jsdelivr.net/npm/@uploadcare/blocks@0.22.8/web/blocks-browser.min.js" type="module"></script>html

or import it directly into your JavaScript code:

<script type="module">
    import * as LR from "https://cdn.jsdelivr.net/npm/@uploadcare/blocks@0.22.8/web/blocks-browser.min.js";
</script>javascript

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

LR.registerBlocks(LR);javascript

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

connectBlocksFrom('https://cdn.jsdelivr.net/npm/@uploadcare/blocks@0.22.8/web/blocks-browser.min.js');javascript

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 = 'https://cdn.jsdelivr.net/npm/@uploadcare/blocks@0.22.8/web/file-uploader-regular.min.css';

connectBlocksFrom('https://cdn.jsdelivr.net/npm/@uploadcare/blocks@0.22.8/web/blocks-browser.min.js').then(
  (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);
    document.body.appendChild(uploader);
  }
);javascript

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:

Mode	Syntax
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.

Example,

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

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.