COMPONENTS / ATOMS / al-file-upload← ALL COMPONENTS

File Upload

<al-file-upload><ALFileUpload> REACTbeta

Reference generated from the custom elements manifest — 17 properties, 3 slots, 2 events.

PLAYGROUND5 CONTROLS

PREVIEW / al-file-upload / SOUTHLEFT

Loading preview

Drag and Drop files here
or

Browse Files

FLAGS

CODE — HTML / REACT

Guidance

NOT YET AUTHORED · 20 COMPONENTS COVERED

NO USAGE GUIDANCE HAS BEEN WRITTEN FOR THIS COMPONENT YET. THE API BELOW IS GENERATED FROM THE MANIFEST AND IS COMPLETE; WHAT IS MISSING IS WHEN TO REACH FOR IT AND WHEN NOT TO.

FIGMA PARITYNOT TRACKED

NO DESIGN-SYSTEM PROJECT TRACKS THIS COMPONENT AGAINST A FIGMA FILE — IT IS EITHER OUTSIDE EVERY PROJECT’S DECLARED SCOPE, OR NOT YET SEEDED INTO ITS PROJECT’S PARITY MANIFEST.

ACCESSIBILITYAXE 4.12.1

CHECKEVIDENCEDETAILRESULT

Default stateAXEfile-upload--DefaultPASS

Advanced statesAXE1 further storyPASS

Screen readerMANUALNo screen-reader pass has been recorded for this component.NOT RECORDED

Keyboard navigationINTERACTION TESTSNo interaction tests and no manual keyboard pass.NOT RECORDED

MEASURED 2026-09-08 · 2 STORIES · AXE WCAG2A + WCAG2AA + WCAG21A + WCAG21AA + WCAG22AA

COLOR CONTRAST1 RULE FAILING

The CI gate disables color-contrast globally (libs/al-web-components/story-fixture/src/main.ts), so its result never reaches a test run. It is enabled for this measurement, and reported here whichever way it comes out.

RULEWHEREELEMENTS

color-contrastElements must meet minimum color contrast ratio thresholdsfile-upload--Disabled3

INSTALL@southleft/al-web-components/components/file-upload

import '@southleft/al-web-components/components/file-upload';
import { ALFileUpload } from '@southleft/al-react';

API — 17 PROPS17 DOCUMENTED

PROPTYPEDEFAULT

fieldIdstringUnique ID of the field—

labelstringLabel for the form field—

namestringName attribute for the checkbox—

valuestringValue associated with the field—

fieldNotestringText for the field note—

errorNotestringText for the error note—

ariaDescribedBystringAria described-by attribute - Connects the field note in the select to the select menu for accessibility—

isRequiredbooleanIndicates if the field is required—

isDisabledbooleanIndicates if the field is disabled—

isErrorbooleanIndicates if the field note is in error state—

hideLabelbooleanIndicates if the label is hidden—

textConfigFileUploadTextConfigConfiguration for text messages in file upload - Specifies error text for unsupported file formats and size exceeded messages{ fileFormatErrorText: defaultTextConfig.fileFormatErrorText, fileSizeErrorText: defaultTextConfig.fileSizeErrorText }

uploadFilesFileUploadProgressStream[]Files to be uploaded from the application - Represents the status of the files—

uploadTimenumberTime taken for uploading - Defaults to 1 second1

fileSizeLimitnumberMaximum file size allowed for upload in MB75

acceptstringAcceptable file types for upload - Example: '.jpg, .png, .gif'—

multiplebooleanAllows multiple files to be added to the file upload—

SLOTS3

SLOTDESCRIPTION

field-noteHelper text replacing the fieldNote property.

errorError text replacing the errorNote property.

(default)The component's content

EVENTS2

EVENTDESCRIPTIONTYPE

onFileUploadFileUploadFired when files are added. Detail: `{ uploadedFiles }` — the files accepted by this interaction.CustomEvent

onFileUploadFileRemoveFired when a file is removed. Detail: `{ updatedFiles }` — the remaining files after removal, not the removed one.CustomEvent

PUBLIC METHODS5

METHODDESCRIPTION

setFileSize()Set file size 1. If the user's operating system is Windows, calculate and return the file size in bytes (converted from megabytes). 2. If the user's operating system is Mac or Linux, calculate and return the file size in bytes (converted from megabytes).

handleOnDragOver()Handle on drag over 1. Prevent the default behavior for the drag event. 2. Check if the dragging state is false, then set it to true to indicate the drag has ended.

handleOnDragEnd()Handle on drag end 1. Prevent the default behavior for the drag event. 2. Check if the dragging state is true, then set it to false to indicate the drag has ended.

handleOnFileRemove()Handle on file remove 1. Filter out the files except the one being removed using its fieldId. 2. If all files are removed, set 'filesState' to null. 3. Dispatch an event to notify that files have been removed.

handleOnFileChange()Handle on file change 1. Copy existing files from state to a new variable 2. Append new files to this new array 3. If there is a maxFiles limit and if the more files have been selected than the max, remove those over the limit from the array. 4. Set new state with existing and newly selected files 5. Transition 'Uploading' status to 'Success' after uploadTime

SOURCE — components/file-upload/file-upload.ts · Atoms/Form/File Upload