File Tile

A representation of a file such as an uploaded image or a template asset.

styleKeys: fileTile

UsageGuidelinesAPI

Use File Tile...

To display user-initiated file uploads.
To show the upload progress and status of a file.

Don't use File Tile...

To initiate uploads. Use File Input or File Dropzone instead.
To show the progress of uploading.

Default

The File Tile component is designed to display individual files.

<Box style={{ maxWidth: '300px' }}>
  <FileTile
    fileName="my-file.png"
    fileDescription="3.56 MB"
    accessibleTextForProgress="100% loaded"
    accessibleTextForSpinner="Waiting"
  >
    <FileTileThumbnail />
    <FileTileDeleteButton />
  </FileTile>
</Box>

<Box style={{ maxWidth: '300px' }}>
  <FileTile
    fileName="my-file.png"
    fileDescription="3.56 MB"
    accessibleTextForProgress="100% loaded"
    accessibleTextForSpinner="Waiting"
  >
    <FileTileThumbnail />
    <FileTileDeleteButton />
  </FileTile>
</Box>

Skin

Use the skin prop to specify the state of the File Tile. The default is standard. Use queued for files that are waiting to be loaded. Use loading for files that are currently being loaded.

<FormField>
  <GridContainer>
    <Row>
      <Column span={6} spanLg={4} spanXl={3} mb={5}>
        <FileTile
          fileName="my-file.png"
          fileDescription="3.56 MB"
          accessibleTextForProgress="100% loaded"
          accessibleTextForSpinner="Waiting"
        >
          <FileTileThumbnail />
          <FileTileDeleteButton />
        </FileTile>
      </Column>
      <Column span={6} spanLg={4} spanXl={3} mb={5}>
        <FileTile
          skin="loading"
          progressValue={56}
          fileName="my-file.png"
          fileDescription="3.56 MB"
          accessibleTextForProgress="56% loaded"
          accessibleTextForSpinner="Waiting"
        >
          <FileTileThumbnail />
          <FileTileDeleteButton />
        </FileTile>
      </Column>
      <Column span={6} spanLg={4} spanXl={3} mb={5}>
        <FileTile
          skin="queued"
          fileName="my-file.png"
          fileDescription="3.56 MB"
          accessibleTextForProgress="0% loaded"
          accessibleTextForSpinner="Waiting"
        >
          <FileTileThumbnail />
          <FileTileDeleteButton />
        </FileTile>
      </Column>
    </Row>
  </GridContainer>
</FormField>

<FormField>
  <GridContainer>
    <Row>
      <Column span={6} spanLg={4} spanXl={3} mb={5}>
        <FileTile
          fileName="my-file.png"
          fileDescription="3.56 MB"
          accessibleTextForProgress="100% loaded"
          accessibleTextForSpinner="Waiting"
        >
          <FileTileThumbnail />
          <FileTileDeleteButton />
        </FileTile>
      </Column>
      <Column span={6} spanLg={4} spanXl={3} mb={5}>
        <FileTile
          skin="loading"
          progressValue={56}
          fileName="my-file.png"
          fileDescription="3.56 MB"
          accessibleTextForProgress="56% loaded"
          accessibleTextForSpinner="Waiting"
        >
          <FileTileThumbnail />
          <FileTileDeleteButton />
        </FileTile>
      </Column>
      <Column span={6} spanLg={4} spanXl={3} mb={5}>
        <FileTile
          skin="queued"
          fileName="my-file.png"
          fileDescription="3.56 MB"
          accessibleTextForProgress="0% loaded"
          accessibleTextForSpinner="Waiting"
        >
          <FileTileThumbnail />
          <FileTileDeleteButton />
        </FileTile>
      </Column>
    </Row>
  </GridContainer>
</FormField>

Error

To show an error on a File Tile, set skin="error" and set an errorMessage. Ensure that a File Tile with an error is always wrapped in a FormField in order to access the form context.

<FormField>
  <FileTile
    style={{ maxWidth: '300px' }}
    skin="error"
    errorMessage="Failed to upload image"
    fileName="my-file.png"
    fileDescription="3.56 MB"
    accessibleTextForProgress="0% loaded"
    accessibleTextForSpinner="Waiting"
  >
    <FileTileThumbnail />
    <FileTileDeleteButton />
  </FileTile>
</FormField>

<FormField>
  <FileTile
    style={{ maxWidth: '300px' }}
    skin="error"
    errorMessage="Failed to upload image"
    fileName="my-file.png"
    fileDescription="3.56 MB"
    accessibleTextForProgress="0% loaded"
    accessibleTextForSpinner="Waiting"
  >
    <FileTileThumbnail />
    <FileTileDeleteButton />
  </FileTile>
</FormField>

List

The default UI layout is layout="thumb" which displays the File Tile as a 1:1 square. Use layout="list" for a more condensed list view that stacks vertically.

<FileTile
  layout="list"
  fileName="my-file.png"
  fileDescription="3.56 MB"
  accessibleTextForProgress="100% loaded"
  accessibleTextForSpinner="Waiting"
>
  <FileTileThumbnail />
  <FileTileDeleteButton />
</FileTile>

<FileTile
  layout="list"
  fileName="my-file.png"
  fileDescription="3.56 MB"
  accessibleTextForProgress="100% loaded"
  accessibleTextForSpinner="Waiting"
>
  <FileTileThumbnail />
  <FileTileDeleteButton />
</FileTile>

Thumbnail

If the file is an image, pass a ResponsiveImage as a child to the FileThumbnail. File Tile handles the aspect ratio of the image.

<FormField>
  <GridContainer>
    <Row>
      <Column span={6} spanLg={4} spanXl={3} mb={5}>
        <FlexBox gap={5} flexDirection="column">
          <FileTile
            fileName="my-file.png"
            fileDescription="3.56 MB"
            accessibleTextForProgress="100% loaded"
            accessibleTextForSpinner="Waiting"
          >
            <FileTileThumbnail>
              <ResponsiveImage src="https://picsum.photos/600/400?q=1" />
            </FileTileThumbnail>
            <FileTileDeleteButton />
          </FileTile>
          <FileTile
            layout="list"
            fileName="my-file.png"
            fileDescription="3.56 MB"
            accessibleTextForProgress="100% loaded"
            accessibleTextForSpinner="Waiting"
          >
            <FileTileThumbnail>
              <ResponsiveImage src="https://picsum.photos/600/400?q=1" />
            </FileTileThumbnail>
            <FileTileDeleteButton />
          </FileTile>
        </FlexBox>
      </Column>
      <Column span={6} spanLg={4} spanXl={3} mb={5}>
        <FlexBox gap={5} flexDirection="column">
          <FileTile
            fileName="my-file.png"
            fileDescription="3.56 MB"
            accessibleTextForProgress="56% loaded"
            accessibleTextForSpinner="Waiting"
          >
            <FileTileThumbnail>
              <ResponsiveImage src="https://picsum.photos/400/600?q=1" />
            </FileTileThumbnail>
            <FileTileDeleteButton />
          </FileTile>
          <FileTile
            layout="list"
            fileName="my-file.png"
            fileDescription="3.56 MB"
            accessibleTextForProgress="56% loaded"
            accessibleTextForSpinner="Waiting"
          >
            <FileTileThumbnail>
              <ResponsiveImage src="https://picsum.photos/400/600?q=1" />
            </FileTileThumbnail>
            <FileTileDeleteButton />
          </FileTile>
        </FlexBox>
      </Column>
      <Column span={6} spanLg={4} spanXl={3} mb={5}>
        <FlexBox gap={5} flexDirection="column">
          <FileTile
            fileName="my-file.png"
            fileDescription="3.56 MB"
            accessibleTextForProgress="0% loaded"
            accessibleTextForSpinner="Waiting"
          >
            <FileTileThumbnail>
              <ResponsiveImage src="https://picsum.photos/400/400?q=1" />
            </FileTileThumbnail>
            <FileTileDeleteButton />
          </FileTile>
          <FileTile
            layout="list"
            fileName="my-file.png"
            fileDescription="3.56 MB"
            accessibleTextForProgress="0% loaded"
            accessibleTextForSpinner="Waiting"
          >
            <FileTileThumbnail>
              <ResponsiveImage src="https://picsum.photos/400/400?q=1" />
            </FileTileThumbnail>
            <FileTileDeleteButton />
          </FileTile>
        </FlexBox>
      </Column>
    </Row>
  </GridContainer>
</FormField>

<FormField>
  <GridContainer>
    <Row>
      <Column span={6} spanLg={4} spanXl={3} mb={5}>
        <FlexBox gap={5} flexDirection="column">
          <FileTile
            fileName="my-file.png"
            fileDescription="3.56 MB"
            accessibleTextForProgress="100% loaded"
            accessibleTextForSpinner="Waiting"
          >
            <FileTileThumbnail>
              <ResponsiveImage src="https://picsum.photos/600/400?q=1" />
            </FileTileThumbnail>
            <FileTileDeleteButton />
          </FileTile>
          <FileTile
            layout="list"
            fileName="my-file.png"
            fileDescription="3.56 MB"
            accessibleTextForProgress="100% loaded"
            accessibleTextForSpinner="Waiting"
          >
            <FileTileThumbnail>
              <ResponsiveImage src="https://picsum.photos/600/400?q=1" />
            </FileTileThumbnail>
            <FileTileDeleteButton />
          </FileTile>
        </FlexBox>
      </Column>
      <Column span={6} spanLg={4} spanXl={3} mb={5}>
        <FlexBox gap={5} flexDirection="column">
          <FileTile
            fileName="my-file.png"
            fileDescription="3.56 MB"
            accessibleTextForProgress="56% loaded"
            accessibleTextForSpinner="Waiting"
          >
            <FileTileThumbnail>
              <ResponsiveImage src="https://picsum.photos/400/600?q=1" />
            </FileTileThumbnail>
            <FileTileDeleteButton />
          </FileTile>
          <FileTile
            layout="list"
            fileName="my-file.png"
            fileDescription="3.56 MB"
            accessibleTextForProgress="56% loaded"
            accessibleTextForSpinner="Waiting"
          >
            <FileTileThumbnail>
              <ResponsiveImage src="https://picsum.photos/400/600?q=1" />
            </FileTileThumbnail>
            <FileTileDeleteButton />
          </FileTile>
        </FlexBox>
      </Column>
      <Column span={6} spanLg={4} spanXl={3} mb={5}>
        <FlexBox gap={5} flexDirection="column">
          <FileTile
            fileName="my-file.png"
            fileDescription="3.56 MB"
            accessibleTextForProgress="0% loaded"
            accessibleTextForSpinner="Waiting"
          >
            <FileTileThumbnail>
              <ResponsiveImage src="https://picsum.photos/400/400?q=1" />
            </FileTileThumbnail>
            <FileTileDeleteButton />
          </FileTile>
          <FileTile
            layout="list"
            fileName="my-file.png"
            fileDescription="3.56 MB"
            accessibleTextForProgress="0% loaded"
            accessibleTextForSpinner="Waiting"
          >
            <FileTileThumbnail>
              <ResponsiveImage src="https://picsum.photos/400/400?q=1" />
            </FileTileThumbnail>
            <FileTileDeleteButton />
          </FileTile>
        </FlexBox>
      </Column>
    </Row>
  </GridContainer>
</FormField>

Description

Use fileDescription to show the file size. e.g. 3.56 MB. It can also be used to show other metadata such as file dimensions. e.g. 600px x 400px.

<GridContainer>
  <Row>
    <Column span={6} spanXs={12}>
      <FileTile
        fileName="my-file.png"
        fileDescription="3.56 MB"
        accessibleTextForProgress="100% loaded"
        accessibleTextForSpinner="Waiting"
      >
        <FileTileThumbnail />
        <FileTileDeleteButton />
      </FileTile>
    </Column>
    <Column span={6} spanXs={12}>
      <FileTile
        fileName="my-other-file.png"
        fileDescription="600px x 400px"
        accessibleTextForProgress="100% loaded"
        accessibleTextForSpinner="Waiting"
      >
        <FileTileThumbnail />
        <FileTileDeleteButton />
      </FileTile>
    </Column>
  </Row>
</GridContainer>

<GridContainer>
  <Row>
    <Column span={6} spanXs={12}>
      <FileTile
        fileName="my-file.png"
        fileDescription="3.56 MB"
        accessibleTextForProgress="100% loaded"
        accessibleTextForSpinner="Waiting"
      >
        <FileTileThumbnail />
        <FileTileDeleteButton />
      </FileTile>
    </Column>
    <Column span={6} spanXs={12}>
      <FileTile
        fileName="my-other-file.png"
        fileDescription="600px x 400px"
        accessibleTextForProgress="100% loaded"
        accessibleTextForSpinner="Waiting"
      >
        <FileTileThumbnail />
        <FileTileDeleteButton />
      </FileTile>
    </Column>
  </Row>
</GridContainer>

Deleting files

The FileTileDeleteButton subcomponent allows users to control the files they upload. This subcomponent is optional but recommended in most use cases.

Errors

If File Tile has skin="error" or an errorMessage, then it needs to be wrapped in a FormField component so that the form context exists. Pairing this with a File Dropzone will automatically pick up the errors from File Tile and apply them to the file input in the File Dropzone.

Props

FileTile

This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.

See core props for additional props that can be applied to this component.

prop	type	required	description	default
fileName	`string`	true	The name of the file	null
accessibleTextForProgress	`string`	true	The localized accessible text for the Progress component	null
accessibleTextForSpinner	`string`	true	The localized accessible text for the Spinner component	null
skin	`"standard" \| "loading" \| "error" \| "queued" \| null`	false	The visual style of the FileTile	null
errorMessage	`string \| null`	false	Error message on file upload failure	null
fileDescription	`string \| null`	false	The description of the file, could be file size or dimensions e.g. "3.56 MB" or "600x400"	null
layout	`"list" \| "thumb" \| null`	false	The visual layout of the FileTile	null
progressValue	`number \| null`	false	The percentage of progress of the file upload	null

FileTileDeleteButton

This component is implemented using the <button /> as the root element. You can utilize the native attributes supported by <button /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.

See core props for additional props that can be applied to this component.

prop	type	required	description	default
accessibleText	`string`	true	The localized accessible text used for screen readers	null

FileTileThumbnail

See core props for additional props that can be applied to this component.