Preview

Usage

The value property is a FileList and must be managed via JavaScript:

<cs-file-upload accept=".png,.jpg,.pdf" multiple></cs-file-upload>

<script>
  const upload = document.querySelector('cs-file-upload');
  upload.addEventListener('cs-change', (e) => {
    console.log('Selected files:', e.detail.value);
  });
</script>

Properties

acceptstring

Specifies the native file input accept attribute to describe the allow-list of file types.

aria-requiredboolean default: null

Specifies whether to add aria-required to the file upload control.

file-errorsReadonlyArray<null | string>

An array of file errors corresponding to the files in the value.

file-token-alignmentFileUploadProps.FileTokenAlignment default: 'vertical'

Alignment of the file tokens. Defaults to "vertical".

file-warningsReadonlyArray<null | string>

An array of file warnings corresponding to the files in the value.

i18n-stringsFileUploadProps.I18nStrings

An object containing all the localized strings required by the component:

• uploadButtonText (function): A function to render the text of the file upload button. It takes multiple attribute to define plurality.
• dropzoneText (function): A function to render the text shown in the dropzone. It takes multiple attribute to define plurality.
• removeFileAriaLabel (function): A function to render the ARIA label for file token remove button.
• limitShowFewer (string): The text of the show more tokens button.
• limitShowMore (string): The text of the show fewer tokens button.
• errorIconAriaLabel (string): The ARIA label to be shown on the error file icon.
• warningIconAriaLabel (string): The ARIA label to be shown on the warning file icon.
• formatFileSize (function): (Optional) A function that takes file size in bytes, and produces a formatted string.
• formatFileLastModified (function): (Optional) A function that takes the files last modified date, and produces a formatted string.

multipleboolean default: false

Specifies the native file input multiple attribute to allow users entering more than one file.

show-file-last-modifiedboolean default: false

Show file last modified timestamp in the token. Use i18nStrings.formatFileLastModified to customize it.

show-file-sizeboolean default: false

Show file size in the token. Use i18nStrings.formatFileSize to customize it.

show-file-thumbnailboolean default: false

Show file thumbnail in the token. Only supported for images.

token-limitnumber

Specifies the maximum number of displayed file tokens. If the property isn't set, all of the tokens are displayed.

valueReadonlyArray<File>required

Specifies the currently selected file(s). If you want to clear the selection, use empty array.

Slots

constraintText

Constraint text that is displayed below the control. Use this to provide additional information about file size limit, etc.

errorText

Text that displays as a validation error message.

warningText

Text that displays as a validation warning message.

Events

changeCustomEvent<FileUploadProps.ChangeDetail>

Called when the user selects new file(s), or removes a file. The event detail contains the current value of the component.