File Loader

Components

File Loader

This component allows the user to select one or more files to upload to a particular location.

Preview

Figma

Uses

Upload components are often used to allow users to upload important files, such as documents or images, to a website or application.

When to use

When you want to allow users to upload files from your computer or mobile device: Upload components are the most convenient way to allow users to upload files from their computer or mobile device.

When you need an easy and quick way to upload files: The upload components offer an easy and quick way to upload files, which can save time and effort.

When you want to restrict the type of files that can be uploaded: Upload components often have configuration options that allow you to restrict the type of files that can be uploaded, which can be useful to avoid uploading unwanted or inappropriate files.

When not to use

When you do not want to allow users to upload files: If you do not want to allow users to upload files, you do not need to use a upload component.

When you don’t need to upload files: If you do not need to upload files, you do not need to use a upload component.

Behaviour

States

Default

Focus

Filled

Error

Disabled

Accessibility

This component has been validated to meet the accessibility requirements of UNE-EN 301549:2022, which includes the criteria of WCAG 2.1 (AA), however, changes in content and styles can affect accessibility compliance. We must make sure to review and follow the guidelines in this section when you update or add new content or style to this component.

The File Uploader has tabindex=”0” to access it.

It has the aria-label property.

The label, when required, has the aria-required property.