Installation
On this page
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:
<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/blocks
sh
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/blocks
sh
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.