File Uploader installation
From CDN
We recommend using the one of the modern code distribution services, such as:
Import the File Uploader library into your JavaScript code:
Note that we distribute the library as ES modules, so you need to use the type="module"
attribute on the <script>
tag.
We’re also providing IIFE bundle, but it’s not recommended to use it directly.
From NPM
Install the npm package:
Then you can use the File Uploader and build your own solutions from the source code:
React Uploader
This library allows you to easily integrate the File Uploader into your React applications:
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:
Then import loadFileUploaderFrom
function to connect the library dynamically and
avoid errors:
You may need to implement some logic that depends on connected uploader or get
access directly to the imported components. Since loadFileUploaderFrom
returns
Promise
, use .then()
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:
Look at the File Uploader solutions for more.
Example:
The <uc-config>
block is used to configure the uploader. Take a look at
uploader configuration.
The ctx-name
attribute is used to specify the name of the uploader context,
which allows wire blocks together. Required.
The headless
attribute has been introduced to control the visibility of a button in the regular mode uc-file-uploader-regular
.
By setting this attribute, you can easily toggle the button’s visibility
between hidden and visible states. Optional.