Preview

Usage

const group = document.querySelector('cs-file-token-group');
group.items = [
  { file: new File([''], 'report.pdf', { type: 'application/pdf' }) },
  { file: new File([''], 'photo.jpg', { type: 'image/jpeg' }) },
];
group.addEventListener('dismiss', e => {
  const { fileIndex } = e.detail;
  group.items = group.items.filter((_, i) => i !== fileIndex);
});

Properties

alignmentFileTokenGroupProps.Alignment default: 'horizontal'

Specifies the direction in which tokens are aligned (horizontal | vertical).

i18n-stringsFileTokenGroupProps.I18nStrings

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

• removeFileAriaLabel (function): A function to render the ARIA label for file token remove button. Receives file index and file name.
• 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.

itemsReadonlyArray<FileTokenGroupProps.Item>required

An array of objects representing token items. Each token has the following properties:

• file (string) - File value.
• loading (boolean) - (Optional) Determine whether the token is loading.
• errorText (string) - (Optional) Text that displays as a validation error message.
• warningText (string) - (Optional) - Text that displays as a validation warning message.

limitnumber

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

limit-show-fewer-aria-labelstring default: ''

Adds an aria-label to the "Show fewer" button. Use to assign unique labels when there are multiple file token groups with the same limitShowFewer label on one page.

limit-show-more-aria-labelstring default: ''

Adds an aria-label to the "Show more" button. Use to assign unique labels when there are multiple file token groups with the same limitShowMore label on one page.

read-onlyboolean default: false

Specifies if the control is read-only, which prevents the user from modifying the value. A read-only control is still focusable.

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.

Events

dismissCustomEvent<FileTokenGroupProps.DismissDetail>

Called when the user clicks on the dismiss button. The token won't be automatically removed. Make sure that you add a listener to this event to update your application state.