FileDisplay

FileDisplay components are used to visual file attachments.

For more information on how to use the features and props for this component, check out the developer documentation.

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.

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.

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.

NameTypeDefaultDescription
classNamestringAdditional CSS classes.
displayTextstringThe text to be displayed.
ref
Ref<HTMLDivElement |HTMLAnchorElement |HTMLSpanElement> 
Ref for the wrapping element.
thumbnailstringThumbnail image.
valuestringURL address
variant
'file' |'link' |'text' 
"file" Display value either as file, link only or textual representation.