| Name | Description | Default | Type |
|---|---|---|---|
className | Additional CSS classes. | | string |
displayText | The text to be displayed. | | string |
onDownload | | (url: string) => void | |
onPreview | | (url: string) => void | |
ref | Ref for the wrapping element. | | Ref<HTMLAnchorElement |HTMLDivElement |HTMLSpanElement> |
thumbnail | Thumbnail image. | | string |
value | URL address | | string |
variant | Display value either as file, link only or textual representation. | "file" | 'link' |'file' |'text' |
FileDisplay
core package3.2.2
Note: All components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit Pega Community.
FileDisplay components are used to visual file attachments.
Usage
The FileDisplay component accepts a value as an href to some file or a file name. If a displayName is provided, that text will display instead of the value. The component displays "--" in the case of an undefined value.
FileDisplay components can be rendered as a Card with visual and file name regions, as a clickable Link, or as plain Text, depending on the variant given.
Example
In addition to the name shown, there is always a visual region associated with the FileDisplay. By default, the visual will be an Icon representing the mime type of the file. However, if a thumbnail is also provided, then the background of the visual region will be set to the thumbnail.
Example
- Image file
- Image file with thumbnail
- Video file
- Audio file
- Document file
- PDF file
- PDF
- Presentation file
- Spreadsheet file
- Database
- Zip file
- Unknown file type
File upload item
Cosmos offers a second option for displaying files with the file upload item component. This component has a slightly different rendering style that includes the addition of an actions region that supports a variety of callback functions such as onDelete and onDownload. File upload items use the same visual region as the FileDisplay component, though if passed a thumbnail and the file has an identifyable mime type of image, the visual will become much larger.
The file upload item component also includes added support for meta information that would be displayed within the same Card underneath the file name. If a progress number is provided, a Progress indicator with the given number will replace any meta value.
Example
Pega World iNspire
Some additional information