Import
import { InputFileModule } from '@backbase/ui-ang/input-file'
Usage
Use the bb-input-file-ui component to provide a file upload button in your forms.
<!-- Basic input file usage -->
<bb-input-file-ui label="Upload file"></bb-input-file-ui>
Inputs
|
Input |
Format |
Default |
|---|---|---|
|
accept |
string |
'*' |
|
autofocus |
boolean |
false |
|
buttonSize |
'sm' | 'md' |
'md' |
|
buttonText |
string |
undefined |
|
color |
string |
'link' |
|
disabled |
boolean |
false |
|
iconName |
string |
'attachment' |
|
inputClassName |
string |
undefined |
|
label |
string |
'' |
|
maxSizeInMb |
number | string |
undefined |
|
multiple |
boolean |
false |
|
readonly |
boolean |
false |
|
required |
boolean |
false |
|
size |
number | string |
20 |
accept
The accept input specifies the file types that the input should accept. Defaults to any file type ('*').
<!-- Input file accepting only images -->
<bb-input-file-ui
accept="image/*"
label="Upload image">
</bb-input-file-ui>
autofocus
The autofocus input determines whether the button should be automatically focused when the component is rendered. Defaults to false.
<!-- Input file with autofocus enabled -->
<bb-input-file-ui
[autofocus]="true"
label="Upload file">
</bb-input-file-ui>
buttonSize
The buttonSize input sets the size of the upload button. Defaults to 'md'.
<!-- Input file with a small button -->
<bb-input-file-ui
buttonSize="sm"
label="Upload file">
</bb-input-file-ui>
buttonText
The buttonText input customizes the text displayed on the upload button. If not set, defaults to 'Attach file'.
<!-- Input file with custom button text -->
<bb-input-file-ui
buttonText="Select files"
label="Upload file">
</bb-input-file-ui>
color
The color input sets the color of the upload button. Defaults to 'link'.
<!-- Input file with a primary color button -->
<bb-input-file-ui
color="primary"
label="Upload file">
</bb-input-file-ui>
disabled
The disabled input disables the file input button when set to true. Defaults to false.
<!-- Disabled input file -->
<bb-input-file-ui
[disabled]="true"
label="Upload file">
</bb-input-file-ui>
iconName
The iconName input sets the icon displayed in the upload button. Defaults to 'attachment'.
<!-- Input file with a custom icon -->
<bb-input-file-ui
iconName="upload"
label="Upload file">
</bb-input-file-ui>
inputClassName
The inputClassName input adds custom class names to the input element. Defaults to undefined.
<!-- Input file with a custom class -->
<bb-input-file-ui
inputClassName="my-custom-class"
label="Upload file">
</bb-input-file-ui>
label
The label input sets the label for the input. Defaults to an empty string.
<!-- Input file with a label -->
<bb-input-file-ui label="Upload your document"></bb-input-file-ui>
maxSizeInMb
The maxSizeInMb input sets the maximum allowed file size in megabytes. If a file exceeds this size, validation will fail. Defaults to undefined (no limit).
<!-- Input file with a maximum file size of 5 MB -->
<bb-input-file-ui
[maxSizeInMb]="5"
label="Upload file">
</bb-input-file-ui>
multiple
The multiple input allows selection of multiple files when set to true. Defaults to false.
<!-- Input file allowing multiple file selection -->
<bb-input-file-ui
[multiple]="true"
label="Upload files">
</bb-input-file-ui>
readonly
The readonly input makes the input read-only. Defaults to false.
<!-- Read-only input file -->
<bb-input-file-ui
[readonly]="true"
label="Upload file">
</bb-input-file-ui>
required
The required input marks the input as required. Defaults to false.
<!-- Required input file -->
<bb-input-file-ui
[required]="true"
label="Upload file">
</bb-input-file-ui>
size
The size input configures the minimum width to fit the specified number of characters. Defaults to 20.
<!-- Input file with a custom size -->
<bb-input-file-ui
[size]="40"
label="Upload file">
</bb-input-file-ui>
Outputs
|
Event |
Type |
Description |
|---|---|---|
|
blur |
EventEmitter<FocusEvent> |
Emitted when the button loses focus |
|
focus |
EventEmitter<FocusEvent> |
Emitted when the button gains focus |
Accessibility
This component is built with accessibility in mind. See the information below for supported behaviors and configuration options to ensure a fully accessible experience for all users.
ARIA
These inputs support WAI-ARIA compliance and are intended to improve accessibility for users relying on assistive technologies. Use them to provide meaningful semantic information for the component when additional context is needed to convey its purpose, state, or behavior.
|
Input |
Description |
Type |
|---|---|---|
|
ariaActivedescendant |
Identifies the currently active element when focus is on a composite widget |
string |
|
ariaControls |
Indicates which element(s) the widget controls |
string |
|
ariaDescribedby |
References the element that describes the widget |
string |
|
ariaExpanded |
Indicates if the control is expanded or collapsed |
string |
|
ariaLabel |
Sets an accessible label when the label tag is not rendered |
string |
|
ariaLabelledby |
References elements that provide an accessible name |
string |
|
ariaOwns |
Identifies elements as part of a parent-child relationship |
string |
|
role |
Sets the ARIA role for the input |
string |