A form-associated file upload component with drag-and-drop support and upload progress tracking. `ed-file-upload` renders a labeled file input with drag-and-drop zone, file list preview, and optional progress tracking. It integrates with HTML forms via ElementInternals API and supports file type/size validation, multiple file uploads, and custom text configuration. Use this component for: - Single or multiple file uploads with drag-and-drop support - Forms that need file validation (type, size) and error messaging - Applications requiring upload progress and file list preview - Custom text configuration for validation and UI messages The component fires custom events (`uploadedfiles`, `removedfiles`) when files are added or removed. File validation happens client-side (mime type and size), with validation errors tracked in file state. ## Key Properties - `label`: Field label text (can be hidden via hideLabel) - `multiple`: Allow multiple file selection and upload - `accept`: File type filter (e.g., "image/*", ".pdf,.doc") - `fileSizeLimit`: Maximum file size in MB - `fieldNote`: Helper text describing file requirements - `isError` / `isSuccess`: Validation state indicators - `hideLabel`: Visually hide the label but keep it accessible - `textConfig`: Custom messages for validation errors and UI text ## Events - `uploadedfiles`: Fired when files are added (bubbles with `{ uploadedFiles }` detail) - `removedfiles`: Fired when files are removed (bubbles with `{ updatedFiles }` detail)
| Name | Type | Default | Description |
|---|---|---|---|
fieldId |
String |
string = '' |
A form-associated file upload component with drag-and-drop support and upload progress tracking. `ed-file-upload` renders a labeled file input with drag-and-drop zone, file list preview, and optional progress tracking. It integrates with HTML forms via ElementInternals API and supports file type/size validation, multiple file uploads, and custom text configuration. Use this component for: - Single or multiple file uploads with drag-and-drop support - Forms that need file validation (type, size) and error messaging - Applications requiring upload progress and file list preview - Custom text configuration for validation and UI messages The component fires custom events (`uploadedfiles`, `removedfiles`) when files are added or removed. File validation happens client-side (mime type and size), with validation errors tracked in file state. ## Key Properties - `label`: Field label text (can be hidden via hideLabel) - `multiple`: Allow multiple file selection and upload - `accept`: File type filter (e.g., "image/*", ".pdf,.doc") - `fileSizeLimit`: Maximum file size in MB - `fieldNote`: Helper text describing file requirements - `isError` / `isSuccess`: Validation state indicators - `hideLabel`: Visually hide the label but keep it accessible - `textConfig`: Custom messages for validation errors and UI text ## Events - `uploadedfiles`: Fired when files are added (bubbles with `{ uploadedFiles }` detail) - `removedfiles`: Fired when files are removed (bubbles with `{ updatedFiles }` detail) / export class EdFileUpload extends EdFormElement { readonly type = 'file-upload'; static get styles() { return unsafeCSS(styles); } /** The unique id of the field |
label |
String |
string = '' |
The form field's label |
name |
String |
string = '' |
Checkbox name attribute property |
fieldNote |
String |
string = '' |
Fieldnote text |
errorNote |
String |
string = '' |
Errornote text |
ariaDescribedBy |
String |
string = '' |
Aria describedby 1) Used to connect the field note in select field to the select menu for accessibility |
required |
Boolean |
false |
Required attribute |
disabled |
Boolean |
boolean = false |
Disabled attribute |
placeholder |
String |
string = '' |
Placeholder text |
isError |
Boolean |
boolean = false |
To set FieldNote to Error State |
isSuccess |
Boolean |
boolean = false |
Files state / filesState: filesStateConfig[] = []; /** Success state |
hideLabel |
Boolean |
boolean = false |
Hide label |
textConfig |
String |
FileUploadTextConfig = {
fileFormatErrorText: defaultTextConfig.fileFormatErrorText,
fileSizeErrorText: defaultTextConfig.fileSizeErrorText,
uploadingText: defaultTextConfig.uploadingText,
dragandDropText: defaultTextConfig.dragandDropText,
deleteIconName: defaultTextConfig.deleteIconName,
tableFileText: defaultTextConfig.tableFileText
} |
Getter and setter methods for textConfig TextConfig is a JSON structure used to configure the text messages for file upload fileFormatErrorText - Text to be displayed when the file uploaded is not as per supported format, fileSizeErrorText - Text to be displayed when the file size exceeds, uploadingText - Text to be displayed when the file is getting uploaded, dragandDropText - Text to be displayed on drag and drop state, deleteIconName - Icon name for the delete button, tableFileText - Text to be displayed for the first column heading of preview table, tableStatusText - Text to be displayed for the second column heading of preview table |
uploadFiles |
String |
FileUploadProgressStream[] = [] |
Getter and setter methods for files to upload from the application TextConfig is a JSON structure used to set the status for the files |
uploadingtime |
String |
number = 1000 |
Getter and Setter for uploading time |
fileSizeLimit |
String |
number = 75 |
Getter and Setter for file size Validation |
accept |
String |
string = '' |
Getter and Setter for file type Validation |
multiple |
Boolean |
boolean = false |
Multiple attribute 1) Allow multiple files to be added to the file upload |
| Name | Description |
|---|---|
- |
Content to display in the drop zone (e.g., "Drag and drop here or click to browse") |
field-note |
Optional custom field note content |
Full interactive examples, variant previews, accessibility audits, and the complete API reference are available in Storybook — generated directly from the component source code.
packages/eddie-web-components/components/file-upload/file-upload.ts