FileUpload — Smart UI JavaScript API

FileUpload — Smart UI JavaScript API

On this page + Quick start

Quick start · JavaScript

Complete starter source per framework. Run the scaffold/install command first, then replace the listed files with the full code below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>FileUpload - JavaScript Quick Start</title>
  <link rel="stylesheet" href="./node_modules/smart-webcomponents/source/styles/smart.default.css" />
</head>
<body>
  <smart-file-upload id="demo-fileupload"></smart-file-upload>

  <script type="module">
    import './node_modules/smart-webcomponents/source/modules/smart.fileupload.js';

    const el = document.getElementById('demo-fileupload');
    if (el) {

      el.multiple = true;
      el.accept = '.png,.jpg,.pdf';

      el.addEventListener('change', (event) => console.log('change:', event.detail || event));
    }
  </script>
</body>
</html>
For AI tooling

Developer Quick Reference

Component: FileUpload   Framework: JavaScript   Selector: smart-file-upload

API counts: 26 properties, 7 methods, 7 events

Common properties: 0, 1, 2, 3, 4, 5

Common methods: browse(), cancelAll(), cancelFile(), pauseAll(), pauseFile(), uploadAll()

Common events: fileSelected, uploadCanceled, uploadCompleted, uploadError, uploadPaused, uploadStarted

Module hint: smart-webcomponents/source/modules/smart.fileupload.js

FileUpload provides an easy and integrated way for users to upload multiple files.

Class

FileUpload

FileUpload

FileUpload provides an easy and integrated way for users to upload multiple files.

Selector

smart-file-upload

Quick picks

disabledvalue

Properties

AacceptDefines the file types that are allowed for upload by specifying accepted MIME types or file extensions. This property maps directly to the HTML accept attribute on the hidden file input element, which determines which files users can select in the file dialog. These files are then uploaded to the server endpoint specified in the uploadUrl property. Setting this property ensures that only files matching the specified types can be chosen and submitted.
AanimationSpecifies or retrieves the current animation mode. When set to 'none', all animations are disabled and transitions will not be applied. Use this property to control whether animations are enabled or disabled within the component or element.
AappendToAppends the selected files list to a custom container specified by the user. If the property value is a string, it must correspond to the ID of an existing HTML element in the DOM. This element will serve as the new container where the uploaded files list will be rendered. If the provided ID does not match any element in the DOM, the operation will not proceed. This allows developers to control exactly where the files list appears in the application's interface.
AautoUploadDetermines whether files are automatically uploaded immediately after they are selected by the user. When set to true, the upload process begins as soon as files are chosen; when false, uploading must be triggered manually.
DdirectoryEnables users to upload an entire directory at once, including all files contained within any nested subfolders. When this option is selected, the upload process will automatically include every file from the selected directory and its subdirectories. Note: This feature is currently supported only in Firefox and Chrome browsers.
DdisabledControls whether the element is interactive or not. When enabled, the element can be interacted with by the user; when disabled, the element appears inactive and does not respond to user input.
DdropZoneSpecifies a custom container element to serve as the drop zone for file uploads. When files are dropped onto this container, they will be added to the fileUpload component’s file list. If the 'dropZone' property is set to true, the component will use its internal default drop zone. If 'dropZone' is assigned the ID of an existing HTML element in the DOM, that particular element will be used as the drop zone area for file uploads instead. This allows for flexible placement and styling of the drop zone within your application.
HhideFooterConceals the entire footer section, including all of its contents—specifically the "Upload All," "Pause All," and "Close All" buttons—preventing users from accessing these actions.
IitemTemplateEnhances the file item display by applying a custom template to each item in the uploaded files list. This allows you to define the appearance and layout of uploaded file entries, enabling features such as displaying file names, sizes, icons, previews, or custom actions within each file item.
LlocaleSpecifies or retrieves the current language setting for displaying messages. This property works together with the messages property to select the appropriate set of localized text based on the chosen language code (e.g., "en", "fr", "es"). Use this property to dynamically change or access the language used in your application's user interface.
LlocalizeFormatFunctionA callback function that allows you to customize the format of messages returned by the Localization Module. Use this to modify how localized messages are structured or displayed before they are delivered to your application.
MmessagesConfigures the text labels displayed in the widget interface, enabling support for localization and customization of user-facing messages. The localization object should contain the following fields: browse, pauseFile, cancelFile, uploadFile, pauseAll, cancelAll, and uploadAll—each representing the corresponding action's text label. For optimal results and proper display, set these localization messages before the widget element is initialized.
MmultipleSpecifies or retrieves whether users are permitted to select and upload multiple items simultaneously. When enabled, users can choose more than one file or item within the upload interface.
NnameGets or sets the name attribute of the hidden file input element. This name is used as the key in the form data when files are uploaded to the server via the URL specified in the uploadUrl property.
RreadonlyWhen an element is set to readonly, users can view its content but cannot modify or edit it. However, unlike disabled elements, readonly elements remain focusable and their content can typically still be selected and copied. This property is commonly applied to input fields and textareas to prevent changes while allowing visibility and text selection.
RremoveUrlSets or retrieves the URL endpoint used for the remove operation. This property corresponds to the form's action attribute and determines where the form data is submitted when a remove action is triggered. For example, the removeUrl property can be set to the path of a server-side script, such as a PHP file, which processes and handles the remove request on the backend.
RresponseHandlerA callback function designed to process server responses, allowing you to handle successful results as well as different error codes and statuses returned from the server. This enables customized handling of success, failure, and edge-case scenarios based on the server’s response.
RrightToLeftSets or retrieves a value that determines whether the element's alignment supports right-to-left (RTL) text direction, which is commonly used for languages such as Arabic or Hebrew. When enabled, the element and its content are visually aligned to accommodate RTL locales, ensuring proper display and user interface behavior for RTL language users.
SsetHeadersA callback function that allows you to modify or set custom headers for the XMLHttpRequest (XHR) used during the file upload process. This function receives the XHR object as a parameter, enabling you to add, update, or remove HTTP headers before the request is sent.
SshowProgressDisplays a visual progress bar at the bottom of each item being uploaded, providing real-time feedback on the upload status. The progress bar dynamically updates to reflect the current percentage of the upload completed for each individual item, allowing users to easily track the progress of their uploads.
TthemeSpecifies the theme to be applied to the element. The selected theme controls the visual appearance—including colors, fonts, and overall style—ensuring that the element’s look is consistent with the desired design scheme.
UunfocusableIf set to true, the element is not focusable and cannot receive keyboard or programmatic focus.
UunlockKeyDefines the unlockKey property, which is used to retrieve or assign the unique key required to unlock access to the product. Setting this key grants authorization for product usage, while getting it returns the current unlock key in use.
UuploadUrlSpecifies or retrieves the URL endpoint to which files will be uploaded. This property directly maps to the action attribute of the upload form. For instance, the uploadUrl property can be set to the path of a server-side script, such as a PHP, Node.js, or ASP.NET file, responsible for processing and handling the file upload operation on the server. Use this property to define where uploaded files should be sent for server-side handling.
VvalidateFileCallback invoked immediately after files are selected to perform validation. Should return a boolean value: if true, the file is accepted; if false, the file is removed from the selection list and a 'validationError' event is triggered.
VvalueRetrieves the value of the uploaded file, such as the file’s name, path, size, or content, depending on the context and configuration of the file upload input. This function allows access to the selected file’s details for further processing, validation, or storage.

Events

FfileSelectedThis event is triggered whenever a user selects a file, such as through a file input element. It occurs immediately after the file selection is made and can be used to handle or validate the chosen file(s) before further processing, such as uploading or previewing them.
UuploadCanceledThis event is triggered when a user actively cancels an ongoing file upload process. It indicates that the file transfer has been intentionally terminated before completion, either by user action or programmatic intervention.
UuploadCompletedThis event is triggered when a file upload process has finished, indicating that the file has been successfully transmitted to the server or the upload has reached its final state (either success or failure). It can be used to execute follow-up actions, such as displaying a confirmation message, updating the user interface, or processing the uploaded file, once the upload operation is complete.
UuploadErrorThis event is triggered if an error occurs during the file upload process, causing the upload to fail. It provides information about the failure, allowing you to implement custom error handling or user notifications when a file cannot be successfully uploaded.
UuploadPausedThis event is triggered when an ongoing file upload process is temporarily halted by the user or application. It indicates that the upload is not complete and may be resumed or canceled at a later time. Event listeners can use this event to update the user interface, save upload progress, or handle other logic related to the paused upload state.
UuploadStartedThis event is triggered when a file upload process initiates, signaling that the uploading of one or more files has begun. It can be used to perform preparatory actions such as updating the user interface, initializing progress indicators, or logging the start of the file transfer.
VvalidationErrorThis event is triggered when the user-defined 'validateFile' callback function returns a failure result, indicating that the provided file did not meet the specified validation criteria.

Methods

BbrowseDisplays a popup dialog that allows the user to browse their local device and select a file to upload or process.
CcancelAllCancels all currently selected files. This action removes the files from the selection list and ensures that they are not uploaded. Any ongoing or pending uploads for these files are also stopped, preventing them from being transferred to the server.
CcancelFileCancels the specified file's upload process. This action immediately removes the file from the file list and prevents it from being uploaded or processed any further.
PpauseAllPauses the upload process for all files, temporarily halting any active uploads. While uploads are paused and new uploads cannot be started, the files themselves remain visible and accessible in the file list. No files are removed or lost during this pause; uploading can be resumed at a later time.
PpauseFilePauses the upload process for the file at the specified index. The upload for this file is temporarily suspended, preventing any data transfer, but the file itself remains listed in the upload queue. This allows for the upload to be resumed or managed at a later time without removing the file from the list.
UuploadAllUploads every file selected by the user to the server. Handles multiple files simultaneously and ensures each file is processed for upload.
UuploadFileAllows the user to select a file from their local device and upload it to the server for processing or storage.

Properties

acceptDefines the file types that are allowed for upload by specifying accepted MIME types or file extensions. This property maps directly to the HTML accept attribute on the hidden file input element, which determines which files users can select in the file dialog. These files are then uploaded to the server endpoint specified in the uploadUrl property. Setting this property ensures that only files matching the specified types can be chosen and submitted.string | null

Defines the file types that are allowed for upload by specifying accepted MIME types or file extensions. This property maps directly to the HTML accept attribute on the hidden file input element, which determines which files users can select in the file dialog. These files are then uploaded to the server endpoint specified in the uploadUrl property. Setting this property ensures that only files matching the specified types can be chosen and submitted.

Try a demo showcasing the accept property.

Examples

Markup and runtime examples for accept:

HTML:

<smart-file-upload accept=".img"></smart-file-upload>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-file-upload');
el.accept = "'.pdf'";

Read the current value:

const el = document.querySelector('smart-file-upload');
const accept = el.accept;

animationSpecifies or retrieves the current animation mode. When set to 'none', all animations are disabled and transitions will not be applied. Use this property to control whether animations are enabled or disabled within the component or element."none" | "simple" | "advanced"

Specifies or retrieves the current animation mode. When set to 'none', all animations are disabled and transitions will not be applied. Use this property to control whether animations are enabled or disabled within the component or element.

Allowed Values

  • "none" - animation is disabled
  • "simple" - ripple animation is disabled
  • "advanced" - all animations are enabled

Default value

"advanced"

Examples

Markup and runtime examples for animation:

HTML:

<smart-file-upload animation="none"></smart-file-upload>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-file-upload');
el.animation = "simple";

Read the current value:

const el = document.querySelector('smart-file-upload');
const animation = el.animation;

appendToAppends the selected files list to a custom container specified by the user. If the property value is a string, it must correspond to the ID of an existing HTML element in the DOM. This element will serve as the new container where the uploaded files list will be rendered. If the provided ID does not match any element in the DOM, the operation will not proceed. This allows developers to control exactly where the files list appears in the application's interface.string

Appends the selected files list to a custom container specified by the user. If the property value is a string, it must correspond to the ID of an existing HTML element in the DOM. This element will serve as the new container where the uploaded files list will be rendered. If the provided ID does not match any element in the DOM, the operation will not proceed. This allows developers to control exactly where the files list appears in the application's interface.

Default value

"null"
Try a demo showcasing the appendTo property.

Examples

Markup and runtime examples for appendTo:

HTML:

<smart-file-upload append-to="div1"></smart-file-upload>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-file-upload');
el.appendTo = "'div2'";

Read the current value:

const el = document.querySelector('smart-file-upload');
const appendTo = el.appendTo;

autoUploadDetermines whether files are automatically uploaded immediately after they are selected by the user. When set to true, the upload process begins as soon as files are chosen; when false, uploading must be triggered manually.boolean

Determines whether files are automatically uploaded immediately after they are selected by the user. When set to true, the upload process begins as soon as files are chosen; when false, uploading must be triggered manually.

Default value

false

Examples

Markup and runtime examples for autoUpload:

HTML attribute:

<smart-file-upload auto-upload></smart-file-upload>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-file-upload');
el.autoUpload = false;

Read the current value:

const el = document.querySelector('smart-file-upload');
const autoUpload = el.autoUpload;

directoryEnables users to upload an entire directory at once, including all files contained within any nested subfolders. When this option is selected, the upload process will automatically include every file from the selected directory and its subdirectories. Note: This feature is currently supported only in Firefox and Chrome browsers.boolean

Enables users to upload an entire directory at once, including all files contained within any nested subfolders. When this option is selected, the upload process will automatically include every file from the selected directory and its subdirectories. Note: This feature is currently supported only in Firefox and Chrome browsers.

Default value

false
Try a demo showcasing the directory property.

Examples

Markup and runtime examples for directory:

HTML attribute:

<smart-file-upload directory></smart-file-upload>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-file-upload');
el.directory = false;

Read the current value:

const el = document.querySelector('smart-file-upload');
const directory = el.directory;

disabledControls whether the element is interactive or not. When enabled, the element can be interacted with by the user; when disabled, the element appears inactive and does not respond to user input.boolean

Controls whether the element is interactive or not. When enabled, the element can be interacted with by the user; when disabled, the element appears inactive and does not respond to user input.

Default value

false

Examples

Markup and runtime examples for disabled:

HTML attribute:

<smart-file-upload disabled></smart-file-upload>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-file-upload');
el.disabled = false;

Read the current value:

const el = document.querySelector('smart-file-upload');
const disabled = el.disabled;

dropZoneSpecifies a custom container element to serve as the drop zone for file uploads. When files are dropped onto this container, they will be added to the fileUpload component’s file list. If the 'dropZone' property is set to true, the component will use its internal default drop zone. If 'dropZone' is assigned the ID of an existing HTML element in the DOM, that particular element will be used as the drop zone area for file uploads instead. This allows for flexible placement and styling of the drop zone within your application.any

Specifies a custom container element to serve as the drop zone for file uploads. When files are dropped onto this container, they will be added to the fileUpload component’s file list. If the 'dropZone' property is set to true, the component will use its internal default drop zone. If 'dropZone' is assigned the ID of an existing HTML element in the DOM, that particular element will be used as the drop zone area for file uploads instead. This allows for flexible placement and styling of the drop zone within your application.

Try a demo showcasing the dropZone property.

Examples

Markup and runtime examples for dropZone:

HTML:

<smart-file-upload drop-zone="div1"></smart-file-upload>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-file-upload');
el.dropZone = "'div2'";

Read the current value:

const el = document.querySelector('smart-file-upload');
const dropZone = el.dropZone;

hideFooterConceals the entire footer section, including all of its contents—specifically the "Upload All," "Pause All," and "Close All" buttons—preventing users from accessing these actions.boolean

Conceals the entire footer section, including all of its contents—specifically the "Upload All," "Pause All," and "Close All" buttons—preventing users from accessing these actions.

Default value

false

Examples

Markup and runtime examples for hideFooter:

HTML attribute:

<smart-file-upload hide-footer></smart-file-upload>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-file-upload');
el.hideFooter = false;

Read the current value:

const el = document.querySelector('smart-file-upload');
const hideFooter = el.hideFooter;

itemTemplateEnhances the file item display by applying a custom template to each item in the uploaded files list. This allows you to define the appearance and layout of uploaded file entries, enabling features such as displaying file names, sizes, icons, previews, or custom actions within each file item.any

Enhances the file item display by applying a custom template to each item in the uploaded files list. This allows you to define the appearance and layout of uploaded file entries, enabling features such as displaying file names, sizes, icons, previews, or custom actions within each file item.

Try a demo showcasing the itemTemplate property.

Examples

Markup and runtime examples for itemTemplate:

HTML:

<smart-file-upload item-template="div1"></smart-file-upload>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-file-upload');
el.itemTemplate = "'div2'";

Read the current value:

const el = document.querySelector('smart-file-upload');
const itemTemplate = el.itemTemplate;

localeSpecifies or retrieves the current language setting for displaying messages. This property works together with the messages property to select the appropriate set of localized text based on the chosen language code (e.g., "en", "fr", "es"). Use this property to dynamically change or access the language used in your application's user interface.string

Specifies or retrieves the current language setting for displaying messages. This property works together with the messages property to select the appropriate set of localized text based on the chosen language code (e.g., "en", "fr", "es"). Use this property to dynamically change or access the language used in your application's user interface.

Default value

"en"
Try a demo showcasing the locale property.

Examples

Markup and runtime examples for locale:

HTML:

<smart-file-upload locale="de"></smart-file-upload>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-file-upload');
el.locale = "fr";

Read the current value:

const el = document.querySelector('smart-file-upload');
const locale = el.locale;

localizeFormatFunctionA callback function that allows you to customize the format of messages returned by the Localization Module. Use this to modify how localized messages are structured or displayed before they are delivered to your application.function | null

A callback function that allows you to customize the format of messages returned by the Localization Module. Use this to modify how localized messages are structured or displayed before they are delivered to your application.

Examples

Markup and runtime examples for localizeFormatFunction:

HTML:

<smart-file-upload localize-format-function="function(defaultMessage, message, messageArguments){return '...'}"></smart-file-upload>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-file-upload');
el.localizeFormatFunction = "function(defaultMessage, message, messageArguments){return '...'}";

Read the current value:

const el = document.querySelector('smart-file-upload');
const localizeFormatFunction = el.localizeFormatFunction;

messagesConfigures the text labels displayed in the widget interface, enabling support for localization and customization of user-facing messages. The localization object should contain the following fields: browse, pauseFile, cancelFile, uploadFile, pauseAll, cancelAll, and uploadAll—each representing the corresponding action's text label. For optimal results and proper display, set these localization messages before the widget element is initialized.object

Configures the text labels displayed in the widget interface, enabling support for localization and customization of user-facing messages. The localization object should contain the following fields: browse, pauseFile, cancelFile, uploadFile, pauseAll, cancelAll, and uploadAll—each representing the corresponding action's text label. For optimal results and proper display, set these localization messages before the widget element is initialized.

Default value




"en": {

"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",

"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",

"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",

"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",

"moduleUndefined": "Module is undefined.",

"missingReference": "{{elementType}}: Missing reference to {{files}}.",

"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",

"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",

"browse": "Browse",

"uploadFile": "Upload File",

"cancelFile": "Cancel File",

"pauseFile": "Pause File",

"uploadAll": "Upload All",

"cancelAll": "Cancel All",

"pauseAll": "Pause All",

"totalFiles": "Total files: ",

"connectionError": "{{elementType}}: File Upload requires connection to the server.",

"wrongItemIndex": "{{elementType}}: There is no file with such an index in the list of uploaded files.",

"tooLongFileName": "{{elementType}}: File name is too long."

}

Try a demo showcasing the messages property.

Examples

Markup and runtime examples for messages:

HTML:

<smart-file-upload messages="{"de":{"propertyUnknownType":"Die Eigenschaft '{{name}}' hat ein nicht definiertes 'type'-Member!","propertyInvalidValue":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualValue}}, Erwarteter Wert: {{value}}!","propertyInvalidValueType":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualType}}, Erwarteter Wert: {{type}}!","elementNotInDOM":"Element existiert nicht in DOM! Bitte fugen Sie das Element zum DOM hinzu, bevor Sie eine Methode aufrufen.","moduleUndefined":"Modul ist nicht definiert.","missingReference":"{{elementType}}: Fehlender Verweis auf {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser unterstutzt keine HTMLTemplate-Elemente.","invalidTemplate":"{{elementType}}: '{{property}}' Die Eigenschaft akzeptiert eine Zeichenfolge, die mit der ID eines HTMLTemplate-Elements aus dem DOM ubereinstimmen muss.","browse":"Durchsuche","uploadFile":"Datei hochladen","cancelFile":"Datei abbrechen","pauseFile":"Datei anhalten","uploadAll":"Alles hochladen","cancelAll":"Alle Absagen","pauseAll":"Alles pausieren","totalFiles":"Gesamtdateien:","connectionError":"{{elementType}}: Der Datei-Upload erfordert eine Verbindung zum Server.","wrongItemIndex":"{{elementType}}: Es gibt keine Datei mit einem solchen Index in der Liste der hochgeladenen Dateien.","tooLongFileName":"{{elementType}}: Dateiname ist zu lang."}}"></smart-file-upload>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-file-upload');
el.messages = {"en":{"propertyUnknownType":"'{{name}}' property is with undefined 'type' member!","propertyInvalidValue":"Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!","propertyInvalidValueType":"Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!","elementNotInDOM":"Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.","moduleUndefined":"Module is undefined.","missingReference":"{{elementType}}: Missing reference to {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser doesn't support HTMLTemplate elements.","invalidTemplate":"{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.","browse":"Browse","uploadFile":"Upload File","cancelFile":"Cancel File","pauseFile":"Pause File","uploadAll":"Upload All","cancelAll":"Cancel All","pauseAll":"Pause All","totalFiles":"Total files: ","connectionError":"{{elementType}}: File Upload requires connection to the server.","wrongItemIndex":"{{elementType}}: There is no file with such an index in the list of uploaded files.","tooLongFileName":"{{elementType}}: File name is too long."}};

Read the current value:

const el = document.querySelector('smart-file-upload');
const messages = el.messages;

multipleSpecifies or retrieves whether users are permitted to select and upload multiple items simultaneously. When enabled, users can choose more than one file or item within the upload interface.boolean

Specifies or retrieves whether users are permitted to select and upload multiple items simultaneously. When enabled, users can choose more than one file or item within the upload interface.

Default value

false
Try a demo showcasing the multiple property.

Examples

Markup and runtime examples for multiple:

HTML attribute:

<smart-file-upload multiple></smart-file-upload>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-file-upload');
el.multiple = false;

Read the current value:

const el = document.querySelector('smart-file-upload');
const multiple = el.multiple;

nameGets or sets the name attribute of the hidden file input element. This name is used as the key in the form data when files are uploaded to the server via the URL specified in the uploadUrl property.string

Gets or sets the name attribute of the hidden file input element. This name is used as the key in the form data when files are uploaded to the server via the URL specified in the uploadUrl property.

Default value

""

Examples

Markup and runtime examples for name:

HTML:

<smart-file-upload name="fileUploadName"></smart-file-upload>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-file-upload');
el.name = "fileUploadNewName";

Read the current value:

const el = document.querySelector('smart-file-upload');
const name = el.name;

readonlyWhen an element is set to readonly, users can view its content but cannot modify or edit it. However, unlike disabled elements, readonly elements remain focusable and their content can typically still be selected and copied. This property is commonly applied to input fields and textareas to prevent changes while allowing visibility and text selection.boolean

When an element is set to readonly, users can view its content but cannot modify or edit it. However, unlike disabled elements, readonly elements remain focusable and their content can typically still be selected and copied. This property is commonly applied to input fields and textareas to prevent changes while allowing visibility and text selection.

Default value

false

Examples

Markup and runtime examples for readonly:

HTML attribute:

<smart-file-upload readonly></smart-file-upload>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-file-upload');
el.readonly = true;

Read the current value:

const el = document.querySelector('smart-file-upload');
const readonly = el.readonly;

removeUrlSets or retrieves the URL endpoint used for the remove operation. This property corresponds to the form's action attribute and determines where the form data is submitted when a remove action is triggered. For example, the removeUrl property can be set to the path of a server-side script, such as a PHP file, which processes and handles the remove request on the backend.string

Sets or retrieves the URL endpoint used for the remove operation. This property corresponds to the form's action attribute and determines where the form data is submitted when a remove action is triggered. For example, the removeUrl property can be set to the path of a server-side script, such as a PHP file, which processes and handles the remove request on the backend.

Default value

""
Try a demo showcasing the removeUrl property.

Examples

Markup and runtime examples for removeUrl:

HTML:

<smart-file-upload remove-url="localhost"></smart-file-upload>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-file-upload');
el.removeUrl = "localhost/fileUpload";

Read the current value:

const el = document.querySelector('smart-file-upload');
const removeUrl = el.removeUrl;

responseHandlerA callback function designed to process server responses, allowing you to handle successful results as well as different error codes and statuses returned from the server. This enables customized handling of success, failure, and edge-case scenarios based on the server’s response.function | null

A callback function designed to process server responses, allowing you to handle successful results as well as different error codes and statuses returned from the server. This enables customized handling of success, failure, and edge-case scenarios based on the server’s response.

Examples

Markup and runtime examples for responseHandler:

HTML:

<smart-file-upload response-handler="function(xhr){ if(xhr.readyState === 4 && xhr.status === 200) {console.log(xhr.responseText);}}"></smart-file-upload>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-file-upload');
el.responseHandler = "function(xhr){ if(xhr.status === 404) {console.log('Not Found');}}";

Read the current value:

const el = document.querySelector('smart-file-upload');
const responseHandler = el.responseHandler;

rightToLeftSets or retrieves a value that determines whether the element's alignment supports right-to-left (RTL) text direction, which is commonly used for languages such as Arabic or Hebrew. When enabled, the element and its content are visually aligned to accommodate RTL locales, ensuring proper display and user interface behavior for RTL language users.boolean

Sets or retrieves a value that determines whether the element's alignment supports right-to-left (RTL) text direction, which is commonly used for languages such as Arabic or Hebrew. When enabled, the element and its content are visually aligned to accommodate RTL locales, ensuring proper display and user interface behavior for RTL language users.

Default value

false
Try a demo showcasing the rightToLeft property.

Examples

Markup and runtime examples for rightToLeft:

HTML attribute:

<smart-file-upload right-to-left></smart-file-upload>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-file-upload');
el.rightToLeft = true;

Read the current value:

const el = document.querySelector('smart-file-upload');
const rightToLeft = el.rightToLeft;

setHeadersA callback function that allows you to modify or set custom headers for the XMLHttpRequest (XHR) used during the file upload process. This function receives the XHR object as a parameter, enabling you to add, update, or remove HTTP headers before the request is sent.function | null

A callback function that allows you to modify or set custom headers for the XMLHttpRequest (XHR) used during the file upload process. This function receives the XHR object as a parameter, enabling you to add, update, or remove HTTP headers before the request is sent.

Examples

Markup and runtime examples for setHeaders:

HTML:

<smart-file-upload set-headers="function(xhr, file){ xhr.setRequestHeader("Cache-Control", "no-cache"); }}"></smart-file-upload>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-file-upload');
el.setHeaders = "function(xhr, file){ xhr.setRequestHeader(\"X-File-Name\", file.fileName); }}";

Read the current value:

const el = document.querySelector('smart-file-upload');
const setHeaders = el.setHeaders;

showProgressDisplays a visual progress bar at the bottom of each item being uploaded, providing real-time feedback on the upload status. The progress bar dynamically updates to reflect the current percentage of the upload completed for each individual item, allowing users to easily track the progress of their uploads.boolean

Displays a visual progress bar at the bottom of each item being uploaded, providing real-time feedback on the upload status. The progress bar dynamically updates to reflect the current percentage of the upload completed for each individual item, allowing users to easily track the progress of their uploads.

Default value

false
Try a demo showcasing the showProgress property.

Examples

Markup and runtime examples for showProgress:

HTML attribute:

<smart-file-upload show-progress></smart-file-upload>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-file-upload');
el.showProgress = false;

Read the current value:

const el = document.querySelector('smart-file-upload');
const showProgress = el.showProgress;

themeSpecifies the theme to be applied to the element. The selected theme controls the visual appearance—including colors, fonts, and overall style—ensuring that the element’s look is consistent with the desired design scheme.string

Specifies the theme to be applied to the element. The selected theme controls the visual appearance—including colors, fonts, and overall style—ensuring that the element’s look is consistent with the desired design scheme.

Default value

""
Try a demo showcasing the theme property.

Examples

Markup and runtime examples for theme:

HTML:

<smart-file-upload theme="blue"></smart-file-upload>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-file-upload');
el.theme = "red";

Read the current value:

const el = document.querySelector('smart-file-upload');
const theme = el.theme;

unfocusableIf set to true, the element is not focusable and cannot receive keyboard or programmatic focus.boolean

If set to true, the element is not focusable and cannot receive keyboard or programmatic focus.

Default value

false

Examples

Markup and runtime examples for unfocusable:

HTML attribute:

<smart-file-upload unfocusable></smart-file-upload>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-file-upload');
el.unfocusable = false;

Read the current value:

const el = document.querySelector('smart-file-upload');
const unfocusable = el.unfocusable;

unlockKeyDefines the unlockKey property, which is used to retrieve or assign the unique key required to unlock access to the product. Setting this key grants authorization for product usage, while getting it returns the current unlock key in use.string

Defines the unlockKey property, which is used to retrieve or assign the unique key required to unlock access to the product. Setting this key grants authorization for product usage, while getting it returns the current unlock key in use.

Default value

""

Examples

Markup and runtime examples for unlockKey:

HTML:

<smart-file-upload unlock-key=""></smart-file-upload>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-file-upload');
el.unlockKey = "1111-2222-3333-4444-5555";

Read the current value:

const el = document.querySelector('smart-file-upload');
const unlockKey = el.unlockKey;

uploadUrlSpecifies or retrieves the URL endpoint to which files will be uploaded. This property directly maps to the action attribute of the upload form. For instance, the uploadUrl property can be set to the path of a server-side script, such as a PHP, Node.js, or ASP.NET file, responsible for processing and handling the file upload operation on the server. Use this property to define where uploaded files should be sent for server-side handling.string

Specifies or retrieves the URL endpoint to which files will be uploaded. This property directly maps to the action attribute of the upload form. For instance, the uploadUrl property can be set to the path of a server-side script, such as a PHP, Node.js, or ASP.NET file, responsible for processing and handling the file upload operation on the server. Use this property to define where uploaded files should be sent for server-side handling.

Default value

""
Try a demo showcasing the uploadUrl property.

Examples

Markup and runtime examples for uploadUrl:

HTML:

<smart-file-upload upload-url="localhost"></smart-file-upload>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-file-upload');
el.uploadUrl = "localhost/fileUpload";

Read the current value:

const el = document.querySelector('smart-file-upload');
const uploadUrl = el.uploadUrl;

validateFileCallback invoked immediately after files are selected to perform validation. Should return a boolean value: if true, the file is accepted; if false, the file is removed from the selection list and a 'validationError' event is triggered.function | null

Callback invoked immediately after files are selected to perform validation. Should return a boolean value: if true, the file is accepted; if false, the file is removed from the selection list and a 'validationError' event is triggered.

Examples

Markup and runtime examples for validateFile:

HTML:

<smart-file-upload validate-file="function(file){ if (file.size > 204800) { return false; } return true; }"></smart-file-upload>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-file-upload');
el.validateFile = "function(file){ if (file.name.length > 255) { return false; } return true; }";

Read the current value:

const el = document.querySelector('smart-file-upload');
const validateFile = el.validateFile;

valueRetrieves the value of the uploaded file, such as the file’s name, path, size, or content, depending on the context and configuration of the file upload input. This function allows access to the selected file’s details for further processing, validation, or storage.any

Retrieves the value of the uploaded file, such as the file’s name, path, size, or content, depending on the context and configuration of the file upload input. This function allows access to the selected file’s details for further processing, validation, or storage.

Examples

Markup and runtime examples for value:

HTML:

<smart-file-upload value=""></smart-file-upload>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-file-upload');
el.value = "";

Read the current value:

const el = document.querySelector('smart-file-upload');
const value = el.value;

Events

fileSelectedThis event is triggered whenever a user selects a file, such as through a file input element. It occurs immediately after the file selection is made and can be used to handle or validate the chosen file(s) before further processing, such as uploading or previewing them.CustomEvent

This event is triggered whenever a user selects a file, such as through a file input element. It occurs immediately after the file selection is made and can be used to handle or validate the chosen file(s) before further processing, such as uploading or previewing them.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onFileSelected

Arguments

evCustomEvent
ev.detailObject
ev.detail.filename - The name of the selected file.
ev.detail.type - The type of the selected file.
ev.detail.size - The size of the selected file.
ev.detail.index - The index of the selected file.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the fileSelected event.

Examples

Listen for fileSelected using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-file-upload')?.addEventListener('fileSelected', (event) => {
    const detail = event.detail,
        filename = detail.filename,
        type = detail.type,
        size = detail.size,
        index = detail.index;

	// event handling code goes here.
})

uploadCanceledThis event is triggered when a user actively cancels an ongoing file upload process. It indicates that the file transfer has been intentionally terminated before completion, either by user action or programmatic intervention.CustomEvent

This event is triggered when a user actively cancels an ongoing file upload process. It indicates that the file transfer has been intentionally terminated before completion, either by user action or programmatic intervention.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onUploadCanceled

Arguments

evCustomEvent
ev.detailObject
ev.detail.filename - The name of the canceled file.
ev.detail.type - The type of the canceled file.
ev.detail.size - The size of the canceled file.
ev.detail.index - The index of the canceled file.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the uploadCanceled event.

Examples

Listen for uploadCanceled using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-file-upload')?.addEventListener('uploadCanceled', (event) => {
    const detail = event.detail,
        filename = detail.filename,
        type = detail.type,
        size = detail.size,
        index = detail.index;

	// event handling code goes here.
})

uploadCompletedThis event is triggered when a file upload process has finished, indicating that the file has been successfully transmitted to the server or the upload has reached its final state (either success or failure). It can be used to execute follow-up actions, such as displaying a confirmation message, updating the user interface, or processing the uploaded file, once the upload operation is complete.CustomEvent

This event is triggered when a file upload process has finished, indicating that the file has been successfully transmitted to the server or the upload has reached its final state (either success or failure). It can be used to execute follow-up actions, such as displaying a confirmation message, updating the user interface, or processing the uploaded file, once the upload operation is complete.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onUploadCompleted

Arguments

evCustomEvent
ev.detailObject
ev.detail.filename - The name of the canceled file.
ev.detail.type - The type of the canceled file.
ev.detail.size - The size of the canceled file.
ev.detail.index - The index of the canceled file.
ev.detail.status - The status of the uploaded file. Whether there was an error or success.
ev.detail.serverResponse - The response of the remote server.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the uploadCompleted event.

Examples

Listen for uploadCompleted using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-file-upload')?.addEventListener('uploadCompleted', (event) => {
    const detail = event.detail,
        filename = detail.filename,
        type = detail.type,
        size = detail.size,
        index = detail.index,
        status = detail.status,
        serverResponse = detail.serverResponse;

	// event handling code goes here.
})

uploadErrorThis event is triggered if an error occurs during the file upload process, causing the upload to fail. It provides information about the failure, allowing you to implement custom error handling or user notifications when a file cannot be successfully uploaded.CustomEvent

This event is triggered if an error occurs during the file upload process, causing the upload to fail. It provides information about the failure, allowing you to implement custom error handling or user notifications when a file cannot be successfully uploaded.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onUploadError

Arguments

evCustomEvent
ev.detailObject
ev.detail.filename - The name of the canceled file.
ev.detail.type - The type of the canceled file.
ev.detail.size - The size of the canceled file.
ev.detail.index - The index of the canceled file.
ev.detail.status - The status of the uploaded file. Whether there was an error or success.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the uploadError event.

Examples

Listen for uploadError using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-file-upload')?.addEventListener('uploadError', (event) => {
    const detail = event.detail,
        filename = detail.filename,
        type = detail.type,
        size = detail.size,
        index = detail.index,
        status = detail.status;

	// event handling code goes here.
})

uploadPausedThis event is triggered when an ongoing file upload process is temporarily halted by the user or application. It indicates that the upload is not complete and may be resumed or canceled at a later time. Event listeners can use this event to update the user interface, save upload progress, or handle other logic related to the paused upload state.CustomEvent

This event is triggered when an ongoing file upload process is temporarily halted by the user or application. It indicates that the upload is not complete and may be resumed or canceled at a later time. Event listeners can use this event to update the user interface, save upload progress, or handle other logic related to the paused upload state.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onUploadPaused

Arguments

evCustomEvent
ev.detailObject
ev.detail.filename - The name of the paused file.
ev.detail.type - The type of the paused file.
ev.detail.size - The size of the paused file.
ev.detail.index - The index of the paused file.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the uploadPaused event.

Examples

Listen for uploadPaused using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-file-upload')?.addEventListener('uploadPaused', (event) => {
    const detail = event.detail,
        filename = detail.filename,
        type = detail.type,
        size = detail.size,
        index = detail.index;

	// event handling code goes here.
})

uploadStartedThis event is triggered when a file upload process initiates, signaling that the uploading of one or more files has begun. It can be used to perform preparatory actions such as updating the user interface, initializing progress indicators, or logging the start of the file transfer.CustomEvent

This event is triggered when a file upload process initiates, signaling that the uploading of one or more files has begun. It can be used to perform preparatory actions such as updating the user interface, initializing progress indicators, or logging the start of the file transfer.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onUploadStarted

Arguments

evCustomEvent
ev.detailObject
ev.detail.filename - The name of the file that is being uploaded.
ev.detail.type - The type of the file that is being uploaded.
ev.detail.size - The size of the file that is being uploaded.
ev.detail.index - The index of the file that is being uploaded.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the uploadStarted event.

Examples

Listen for uploadStarted using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-file-upload')?.addEventListener('uploadStarted', (event) => {
    const detail = event.detail,
        filename = detail.filename,
        type = detail.type,
        size = detail.size,
        index = detail.index;

	// event handling code goes here.
})

validationErrorThis event is triggered when the user-defined 'validateFile' callback function returns a failure result, indicating that the provided file did not meet the specified validation criteria.CustomEvent

This event is triggered when the user-defined 'validateFile' callback function returns a failure result, indicating that the provided file did not meet the specified validation criteria.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onValidationError

Arguments

evCustomEvent
ev.detailObject
ev.detail.filename - The name of the file which validation has failed.
ev.detail.type - The type of the file which validation has failed.
ev.detail.size - The size of the file which validation has failed.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the validationError event.

Examples

Listen for validationError using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-file-upload')?.addEventListener('validationError', (event) => {
    const detail = event.detail,
        filename = detail.filename,
        type = detail.type,
        size = detail.size;

	// event handling code goes here.
})

Methods

browse(): voidDisplays a popup dialog that allows the user to browse their local device and select a file to upload or process.

Displays a popup dialog that allows the user to browse their local device and select a file to upload or process.

On the custom element in the DOM (narrow the selector, e.g. to #my-fileupload, if you host multiple widgets):

document.querySelector('smart-file-upload')?.browse();

cancelAll(): voidCancels all currently selected files. This action removes the files from the selection list and ensures that they are not uploaded. Any ongoing or pending uploads for these files are also stopped, preventing them from being transferred to the server.

Cancels all currently selected files. This action removes the files from the selection list and ensures that they are not uploaded. Any ongoing or pending uploads for these files are also stopped, preventing them from being transferred to the server.

On the custom element in the DOM (narrow the selector, e.g. to #my-fileupload, if you host multiple widgets):

document.querySelector('smart-file-upload')?.cancelAll();

cancelFile( index: number): voidCancels the specified file's upload process. This action immediately removes the file from the file list and prevents it from being uploaded or processed any further.

Cancels the specified file's upload process. This action immediately removes the file from the file list and prevents it from being uploaded or processed any further.

Arguments

indexnumber

Index of the file which will be canceled.

On the custom element in the DOM (narrow the selector, e.g. to #my-fileupload, if you host multiple widgets):

document.querySelector('smart-file-upload')?.cancelFile("1");

pauseAll(): voidPauses the upload process for all files, temporarily halting any active uploads. While uploads are paused and new uploads cannot be started, the files themselves remain visible and accessible in the file list. No files are removed or lost during this pause; uploading can be resumed at a later time.

Pauses the upload process for all files, temporarily halting any active uploads. While uploads are paused and new uploads cannot be started, the files themselves remain visible and accessible in the file list. No files are removed or lost during this pause; uploading can be resumed at a later time.

On the custom element in the DOM (narrow the selector, e.g. to #my-fileupload, if you host multiple widgets):

document.querySelector('smart-file-upload')?.pauseAll();

pauseFile( id: number): voidPauses the upload process for the file at the specified index. The upload for this file is temporarily suspended, preventing any data transfer, but the file itself remains listed in the upload queue. This allows for the upload to be resumed or managed at a later time without removing the file from the list.

Pauses the upload process for the file at the specified index. The upload for this file is temporarily suspended, preventing any data transfer, but the file itself remains listed in the upload queue. This allows for the upload to be resumed or managed at a later time without removing the file from the list.

Arguments

idnumber

Index of the file which will be paused.

On the custom element in the DOM (narrow the selector, e.g. to #my-fileupload, if you host multiple widgets):

document.querySelector('smart-file-upload')?.pauseFile("1");

uploadAll(): voidUploads every file selected by the user to the server. Handles multiple files simultaneously and ensures each file is processed for upload.

Uploads every file selected by the user to the server. Handles multiple files simultaneously and ensures each file is processed for upload.

On the custom element in the DOM (narrow the selector, e.g. to #my-fileupload, if you host multiple widgets):

document.querySelector('smart-file-upload')?.uploadAll();

uploadFile( id: number): voidAllows the user to select a file from their local device and upload it to the server for processing or storage.

Allows the user to select a file from their local device and upload it to the server for processing or storage.

Arguments

idnumber

Index of the file which will be uploaded.

On the custom element in the DOM (narrow the selector, e.g. to #my-fileupload, if you host multiple widgets):

document.querySelector('smart-file-upload')?.uploadFile("1");

CSS Variables

--smart-file-upload-default-widthvar()

Default value

"var(--smart-editor-width)"

Default width of the smartFileUpload

--smart-file-upload-browse-button-widthvar()

Default value

"auto"

Default width of the browse button

--smart-file-upload-browse-button-heightvar()

Default value

"auto"

Default height of the browse button

--smart-file-upload-footer-button-widthvar()

Default value

"auto"

Default height of the smartFileUpload's footer buttons

--smart-file-upload-footer-button-heightvar()

Default value

"auto"

Default height of the smartFileUpload's footer buttons

--smart-file-upload-text-content-uploading-startvar()

Default value

"'Connecting ...'"

Default text content of the pseudo element shown when upload starts.

--smart-file-upload-text-content-uploadingvar()

Default value

"'Uploading ...'"

Default text content of the pseudo element shown during the upload.

--smart-file-upload-text-content-errorvar()

Default value

"'Upload error!'"

Default text content of the pseudo element shown on error.

--smart-file-upload-text-content-pausevar()

Default value

"'Upload paused!'"

Default text content of the pseudo element shown when upload is paused.

--smart-file-upload-text-content-drop-zonevar()

Default value

"'Drag files here'"

Default text content of the pseudo element shown where is the drop zone.

--smart-file-upload-text-content-drop-zone-overvar()

Default value

"'Drop here \e824'"

Default text content of the pseudo element shown when dragged files are over the drop zone.

--smart-file-upload-container-min-heightvar()

Default value

"60px"

Sets minimmum height of the drop zone and file zone containers.

--smart-file-upload-total-files-min-heightvar()

Default value

"20px"

Sets min height of the container where total numbers of items is displayed.