File Tile (draft)

Default

The FileTile component is designed to display individual files.

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

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

Layout

You can change the UI layout by setting layout="list" for a list view or layout="thumb" for the default thumb view.

<GridContainer>
  <Row>
    <Column span={6} spanXs={12} mb={5}>
      <FileTile
        fileName="my-file.png"
        fileSize="3.56 MB"
        accessibleTextForProgress="100% loaded"
        accessibleTextForSpinner="Waiting"
      >
        <FileTileThumbnail />
        <FileTileDeleteButton />
      </FileTile>
    </Column>
    <Column span={6} spanXs={12}>
      <FileTile
        layout="list"
        fileName="my-file.png"
        fileSize="3.56 MB"
        accessibleTextForProgress="100% loaded"
        accessibleTextForSpinner="Waiting"
      >
        <FileTileThumbnail />
        <FileTileDeleteButton />
      </FileTile>
    </Column>
  </Row>
</GridContainer>

<GridContainer>
  <Row>
    <Column span={6} spanXs={12} mb={5}>
      <FileTile
        fileName="my-file.png"
        fileSize="3.56 MB"
        accessibleTextForProgress="100% loaded"
        accessibleTextForSpinner="Waiting"
      >
        <FileTileThumbnail />
        <FileTileDeleteButton />
      </FileTile>
    </Column>
    <Column span={6} spanXs={12}>
      <FileTile
        layout="list"
        fileName="my-file.png"
        fileSize="3.56 MB"
        accessibleTextForProgress="100% loaded"
        accessibleTextForSpinner="Waiting"
      >
        <FileTileThumbnail />
        <FileTileDeleteButton />
      </FileTile>
    </Column>
  </Row>
</GridContainer>

Skin

Use the skin prop to specify what state the FileTile is such as standard, loading, queued, error.

<FormField>
  <GridContainer>
    <Row>
      <Column span={6} spanLg={4} spanXl={3} mb={5}>
        <FileTile
          fileName="my-file.png"
          fileSize="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"
          fileSize="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"
          fileSize="3.56 MB"
          accessibleTextForProgress="0% loaded"
          accessibleTextForSpinner="Waiting"
        >
          <FileTileThumbnail />
          <FileTileDeleteButton />
        </FileTile>
      </Column>
      <Column span={6} spanLg={4} spanXl={3} mb={5}>
        <FileTile
          skin="error"
          errorMessage="Failed to upload image"
          fileName="my-file.png"
          fileSize="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"
          fileSize="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"
          fileSize="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"
          fileSize="3.56 MB"
          accessibleTextForProgress="0% loaded"
          accessibleTextForSpinner="Waiting"
        >
          <FileTileThumbnail />
          <FileTileDeleteButton />
        </FileTile>
      </Column>
      <Column span={6} spanLg={4} spanXl={3} mb={5}>
        <FileTile
          skin="error"
          errorMessage="Failed to upload image"
          fileName="my-file.png"
          fileSize="3.56 MB"
          accessibleTextForProgress="0% loaded"
          accessibleTextForSpinner="Waiting"
        >
          <FileTileThumbnail />
          <FileTileDeleteButton />
        </FileTile>
      </Column>
    </Row>
  </GridContainer>
</FormField>

Error

To show an error on a FileTile, set skin="error" and set an errorMessage. Ensure that a FileTile 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"
    fileSize="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"
    fileSize="3.56 MB"
    accessibleTextForProgress="0% loaded"
    accessibleTextForSpinner="Waiting"
  >
    <FileTileThumbnail />
    <FileTileDeleteButton />
  </FileTile>
</FormField>

Thumbnail

If you'd like to provide a file preview, you can pass an image as a child to the FileThumbnail, otherwise a file icon will be displayed.

<FormField>
  <GridContainer>
    <Row>
      <Column span={6} spanLg={4} spanXl={3} mb={5}>
        <FlexBox gap={5} flexDirection="column">
          <FileTile
            fileName="my-file.png"
            fileSize="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"
            fileSize="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"
            fileSize="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"
            fileSize="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"
            fileSize="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"
            fileSize="3.56 MB"
            accessibleTextForProgress="0% loaded"
            accessibleTextForSpinner="Waiting"
          >
            <FileTileThumbnail>
              <ResponsiveImage src="https://picsum.photos/400/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"
            fileSize="3.56 MB"
            accessibleTextForProgress="0% loaded"
            accessibleTextForSpinner="Waiting"
          >
            <FileTileThumbnail />
            <FileTileDeleteButton />
          </FileTile>
          <FileTile
            layout="list"
            fileName="my-file.png"
            fileSize="3.56 MB"
            accessibleTextForProgress="0% loaded"
            accessibleTextForSpinner="Waiting"
          >
            <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"
            fileSize="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"
            fileSize="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"
            fileSize="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"
            fileSize="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"
            fileSize="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"
            fileSize="3.56 MB"
            accessibleTextForProgress="0% loaded"
            accessibleTextForSpinner="Waiting"
          >
            <FileTileThumbnail>
              <ResponsiveImage src="https://picsum.photos/400/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"
            fileSize="3.56 MB"
            accessibleTextForProgress="0% loaded"
            accessibleTextForSpinner="Waiting"
          >
            <FileTileThumbnail />
            <FileTileDeleteButton />
          </FileTile>
          <FileTile
            layout="list"
            fileName="my-file.png"
            fileSize="3.56 MB"
            accessibleTextForProgress="0% loaded"
            accessibleTextForSpinner="Waiting"
          >
            <FileTileThumbnail />
            <FileTileDeleteButton />
          </FileTile>
        </FlexBox>
      </Column>
    </Row>
  </GridContainer>
</FormField>

FileDescription

The fileDescription prop is used to show extra meta about the file. This could include file size or file dimensions e.g. 3.56 MB or 600px x 400px.

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