File Uploader API

For convenience, we provide the <lr-upload-ctx-provider> tag, which offers additional uploader management methods. Simply place the context provider on the page and wire it to the uploader via the ctx-name attribute.

<lr-config
  pubkey="YOUR_PUBLIC_KEY"
  ctx-name="my-uploader"
></lr-config>

<lr-upload-ctx-provider
  id="uploaderctx"
  ctx-name="my-uploader"
></lr-upload-ctx-provider>

<lr-file-uploader-inline
  css-src="https://cdn.jsdelivr.net/npm/@uploadcare/blocks@0.30.2/web/lr-file-uploader-inline.min.css"
  ctx-name="my-uploader"
></lr-file-uploader-inline>html

To access the context provider element and utilize its methods, simply retrieve it as follows:

const uploaderCtx = document.querySelector('#uploaderctx')javascript

Upload all

uploadAll() => void

This method uploads all files that are currently in the upload list.

Add file from object

addFileFromObject(file: File, options?: { silent?: boolean; fileName?: string; }) => void

Add a file to the upload list from a File object. The options parameter is optional:

  • silent - if true, the file will be added to the upload list without triggering an event.
  • fileName - the name of the file to be displayed in the upload list.

Add file from UUID

addFileFromUuid(uuid: string, options?: { silent?: boolean; fileName?: string; }) => void

Add a file to the upload list from a UUID. The options parameter is optional:

  • silent - if true, the file will be added to the upload list without triggering an event.
  • fileName - the name of the file to be displayed in the upload list.

Add file from URL

addFileFromUrl(url: string, options?: { silent?: boolean; fileName?: string; }) => void

Add a file to the upload list from a URL. The options parameter is optional:

  • silent - if true, the file will be added to the upload list without triggering an event.
  • fileName - the name of the file to be displayed in the upload list.

Init uploader flow

initFlow() => void

This method initiates the uploader flow. Its behavior varies depending on the solution used (regular, inline, or minimal), and it is particularly useful for the regular option when you want to open the dialog programmatically.

Done uploader flow

doneFlow() => void

This method terminates the uploader flow. Its behavior depends on the solution used (regular, inline, or minimal) and is particularly useful for the regular option when you want to close the dialog programmatically.