Import
import { FileAttachmentModule } from '@backbase/ui-ang/file-attachment'
Usage
Use the bb-file-attachment-ui component to display a file attachment card with download and optional delete actions.
<!-- Basic file attachment usage -->
<bb-file-attachment-ui
[name]="'document.pdf'"
[size]="102400"
[fileContent]="fileContent$"
></bb-file-attachment-ui>
Inputs
|
Input |
Format |
Default |
|---|---|---|
|
block |
boolean |
false |
|
deletable |
boolean |
false |
|
disabled |
boolean |
false |
|
fileContent |
Observable<ArrayBuffer> |
undefined |
|
loading |
boolean |
false |
|
name (required) |
string |
|
|
size (required) |
number | string |
|
block
The block input determines whether the file attachment should fill the container. Defaults to false.
<!-- File attachment in block mode -->
<bb-file-attachment-ui
[name]="'report.pdf'"
[size]="2048"
[fileContent]="fileContent$"
[block]="true"
></bb-file-attachment-ui>
deletable
The deletable input shows a delete button if set to true. Defaults to false.
<!-- File attachment with delete button -->
<bb-file-attachment-ui
[name]="'report.pdf'"
[size]="2048"
[fileContent]="fileContent$"
[deletable]="true"
></bb-file-attachment-ui>
disabled
The disabled input disables all actions and makes the card non-interactive. Defaults to false.
<!-- Disabled file attachment -->
<bb-file-attachment-ui
[name]="'report.pdf'"
[size]="2048"
[fileContent]="fileContent$"
[disabled]="true"
></bb-file-attachment-ui>
fileContent
The fileContent input provides the file data as an Observable of ArrayBuffer. Required unless disabled is true.
<!-- File attachment with file content observable -->
<bb-file-attachment-ui
[name]="'report.pdf'"
[size]="2048"
[fileContent]="fileContent$"
></bb-file-attachment-ui>
loading
The loading input shows a loading indicator and disables actions. Defaults to false.
<!-- File attachment in loading state -->
<bb-file-attachment-ui
[name]="'report.pdf'"
[size]="2048"
[fileContent]="fileContent$"
[loading]="true"
></bb-file-attachment-ui>
name
The name input sets the file name. This input is required.
<!-- File attachment with file name -->
<bb-file-attachment-ui
[name]="'report.pdf'"
[size]="2048"
[fileContent]="fileContent$"
></bb-file-attachment-ui>
size
The size input sets the file size in bytes. This input is required.
<!-- File attachment with file size -->
<bb-file-attachment-ui
[name]="'report.pdf'"
[size]="2048"
[fileContent]="fileContent$"
></bb-file-attachment-ui>
Outputs
|
Event |
Type |
Description |
|---|---|---|
|
delete |
EventEmitter<void> |
Emitted when the delete button is clicked |
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 |
|---|---|---|
|
ariaDescribedby |
Sets the aria-describedby attribute for the attachment card |
string |
|
ariaLabel |
Sets the accessible label for the delete button |
string |
|
cardId |
Sets the id for the attachment card |
string |
- The component provides ARIA attributes for labeling and describing the card and delete button.
- The card is keyboard accessible unless disabled.
- The delete button is accessible and labeled for assistive technologies.