Default Gray Amethyst

File Item

<mo-file-item> | MOFileItem
Since 1.2 stable

File items represent an uploaded file and provides information about file type, file size etc.

filename_lorem_ipsum.jpg 
<mo-file-item>
  filename_lorem_ipsum.jpg
  <mo-icon name="document" slot="icon"></mo-icon>
</mo-file-item>

import { MOFileItem } from '@metsooutotec/modes-web-components/dist/react';
const App = () => <MOFileItem></MOFileItem>;

Examples

Closable

Add the closable attribute to show a close button that will hide the element.

filename_lorem_ipsum.jpg 
<mo-file-item closable>
  filename_lorem_ipsum.jpg
  <mo-icon name="document" slot="icon"></mo-icon>
</mo-file-item>

Filesize

Set the size attribute to display the filesize of the item. The Format Byte Component is used to convert the given bytes to a human-readable format.

filename_lorem_ipsum.jpg 
<mo-file-item size="120000">
  filename_lorem_ipsum.jpg
  <mo-icon name="document" slot="icon"></mo-icon>
</mo-file-item>

Custom close button

The close button can be customized by using the close-button slot and by styling the base part.

filename_lorem_ipsum.jpg 
<mo-file-item closable>
  filename_lorem_ipsum.jpg
  <mo-icon-button name="trash" slot="close-button" class="icon-button-color"></mo-icon-button>
  <mo-icon name="document" slot="icon"></mo-icon>
</mo-file-item>

<style>
  .icon-button-color::part(base) {
    color: var(--mo-color-alert-500);
  }

  .icon-button-color::part(base):hover,
  .icon-button-color::part(base):focus {
    color: var(--mo-color-alert-600);
  }

  .icon-button-color::part(base):active {
    color: var(--mo-color-alert-400);
  }
</style>

Loading

Show a loading bar by setting the loading attribute. Per default this will display a loading bar in an indeterminate state. The height of the element will be determined by whether the size attributes is set. This will ensure that the height of the item does not change when the file has finished loading.

filename_lorem_ipsum.jpg 
<mo-file-item loading closable size="120000">
  filename_lorem_ipsum.jpg
  <mo-icon name="document" slot="icon"></mo-icon>
</mo-file-item>

Loading progress

Set the progress attribute to show the loading progress between 0 and 100.

filename_lorem_ipsum.jpg 
<mo-file-item loading progress="40" closable size="120000" class="file-item">
  filename_lorem_ipsum.jpg
  <mo-icon name="document" slot="icon"></mo-icon>
</mo-file-item>

<br />

<mo-button circle class="subtract-button"><mo-icon name="minus" label="Decrease"></mo-icon></mo-button>
<mo-button circle class="add-button"><mo-icon name="plus" label="Increase"></mo-icon></mo-button>

<script>
  const fileItem = document.querySelector('.file-item');
  const subtractButton = document.querySelector('.subtract-button');
  const addButton = document.querySelector('.add-button');

  addButton.addEventListener('click', () => {
    const value = Math.min(100, fileItem.progress + 10);
    fileItem.progress = value;

    if (fileItem.progress === 100) {
      fileItem.loading = false;
    }
  });

  subtractButton.addEventListener('click', () => {
    const value = Math.max(0, fileItem.progress - 10);
    fileItem.progress = value;

    if (fileItem.progress < 100) {
      fileItem.loading = true;
    }
  });
</script>

Loading label

Use the label attribute to label the loading bar and tell assistive devices how to announce it.

filename_lorem_ipsum.jpg 
<mo-file-item loading progress="20" label="Uploading File" closable>
  filename_lorem_ipsum.jpg
  <mo-icon name="document" slot="icon"></mo-icon>
</mo-file-item>

Warning

Set the warning attribute to change the color of the element.

File size exceeds 5MB limit 
<mo-file-item warning closable>
  File size exceeds 5MB limit
  <mo-icon name="exclamation-mark-circle" slot="icon"></mo-icon>
</mo-file-item>

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Bundler React Script

To import this component using a bundler:

import '@metsooutotec/modes-web-components/dist/components/file-item/file-item.js';

To import this component as a React component:

import MOFileItem from '@metsooutotec/modes-web-components/dist/react/file-item/';

To import this component using a script tag:

<script type="module" src="https://modes-web.metso.com/dist/components/cdn/components/file-item/file-item.js"></script>

Slots

Name Description
(default) The file list item’s label.
icon The file list item’s icon.
close-button The file list item’s close button.

Learn more about using slots.

Properties

Name Description Reflects Type Default
loading Draws the item in a loading state. boolean false
progress The current progress, 0 to 100. Only respects is loading prop is true. number -
label A custom label for the progress bar’s aria label. Only respects if loading prop is true. string -
lang The locale to render the component in. string -
warning Draws the item in a warning state. boolean false
closable Makes the item closable. boolean false
value A unique value to store in the menu item. This can be used as a way to identify menu items when selected. string ''
size The size of the file in bytes as a read-only 64-bit integer. number -
hidden Indicates whether or not the file list item is hidden. boolean false
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event Description Event Detail
mo-show onMoShow Emitted when the item opens. -
mo-after-show onMoAfterShow Emitted after the item opens and all animations are complete. -
mo-hide onMoHide Emitted when the item closes. -
mo-after-hide onMoAfterHide Emitted after the item closes and all animations are complete. -

Learn more about events.

Methods

Name Description Arguments
show() Shows the item. -
hide() Hides the item -

Learn more about methods.

Parts

Name Description
base The component’s internal wrapper.
icon The file list item’s icon.
label The file list item’s label.
close-button The file list item’s close button.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.