FileCard

File cards are compact elements that represent a file in the UI. They can be used for just showing general info of the file, or either to allow the user to interact with them.

This widget allow users to see information of

Files

and / or trigger actions.

While included here as a standalone component, the most common use will be to display the result of the "onChange" event of <Dropzone/> or <InputButton/> components, so some of the behavior demonstrated here is not totally shown in context.

Basic FileCard

The FileCard component supports displaying information from a

File

object or from given props.
Also, the

onDelete

prop is used to remove the file selection.

<>
   {value ? (
     <FileCard {...value} onDelete={removeFile} />
   ) : (
     <FileInputButton value={value ? [value] : []} onChange={updateFiles} />
   )}
   <FileCard {...sampleFileProps} />
</>
 
// file props
const sampleFileProps = {
  id: ":0:",
  size: 28 * 1024 * 1024,
  type: "text/plain",
  name: "file created from props.jsx",
};

FileInputButton

For completeness, some of these examples include <FileInputButton/> component for allowing the user to select files. For further information of this component check out the FileInputButton page.

ExtFile

ExtFile type is explicity used in the Typescript example and is implicity used in the Javascript example for handling the metadata that makes possible the information exchange between components. For further information about this data type check out the ExtFile-API.

Image preview

By setting the preview prop to

true

the component will show an image preview instead of a file icon.
To acomplish this task this component will take the imageUrlprop or will read the

File

object if given and if it is an image.
Finally, the

info

prop is used to show the complete information of the file.

<>
   {value ? (
     <FileCard {...value} onDelete={removeFile} info preview/>
   ) : (
     <FileInputButton onChange={updateFile} accept="image/*"/>
   )}
   <FileCard {...sampleFileProps} info/>
</>
 
// file props
const sampleFileProps = {
    id: "fileId",
    size: 28 * 1024 * 1024,
    type: "image/jpeg",
    name: "Thor arrives wakanda.jpg",
    imageUrl:"https://cdn.wallpapersafari.com/0/95/1zms6H.jpg"
};

As you can notice, whenimageUrl prop is present, the preview prop is not needed since it has more priority.
On the other side, for displaying an image preview as a result of reading an image File it is necesary to set the preview prop, otherwise a default image preview will be shown in order to save memory.

Validation

The valid prop can be set to

true

false

undefined

Typically, <Dropzone/> or <FileInputButton/> components set this prop when validating the input from a given criteria. You can see the behaviour mentioned in the following demos:

Uploading status

The uploadStatus prop can be set to

"preparing"

"uploading"

"aborted"

"error"

"success"

. Also the uploadMessage prop is used for displaying the error or success message. Finally, the progress prop can be used to show the current progress of the upload process.
Each of the following examples demonstrates one state combination of the FileCard component.

preparing stage

uploading stage

upload result stage

As you can see, you have full control of the FileCard upload props. You can take advantage of them to ake your own upload function and show the user the progress.
On the other hand, you can also leverage the capability of <Dropzone/> and <FileInputButton/> components since they also manage the

uploadStatus

prop for you when upload is enabled. You can see the behaviour mentioned in the following demos:

Actions: info, delete, see, watch, download

You can use the following actions.

FileCard with the onDelete prop will display a delete icon.
FileCard with the info prop will display an "info" icon that will display an info layer.
FileCard with the onSee prop will display the "see" button that can be used to retrieve an image
URI
obtained by reading a
File
object if given or just the
imageUrl
prop if given. In the first case, the file must be an image.
FileCard with the onWatch prop will display the "play" icon that can be used to retrieve the video as a
File
object if given or just the
videoUrl
prop if given. The file must be an video.
FileCard with the downloadUrl prop will display the "download" icon that can be used to start the download. If the onDownload prop is given, the "download" icon will also be visible, but it will be taken as the user will perform their own download.

downloadUrl and onDownload props

When only downloadUrl is specified, FileCard will perform the download only for same-origin URLs since it uses the anchor tag under the hood.
If the resource is located in any other host, it will open a new tab and display the content.
For avoiding that behaviour you can do you own download implementation by overriding the download function by setting the onDownload prop.
You can check an example here:

Download a File from different host

Dark mode and Elevation

The FileCard component supports dark mode by setting the prop

darkMode

true

. The elevation can be used to establish a hierarchy between other content. In practical terms, the elevation controls the size of the shadow applied to the surface. In dark mode, raising the elevation also makes the surface lighter.

Smart image fit

FileCard with

smartImgFit

prop will display image according to its heigh and width.
Image with height greater than its width has a "portrait" orientation. Otherwise it has a "landscape" orientation.

API

See the documentation below for a complete reference to all of the props available to the components mentioned here.