File Tile

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.

ReactVanilla

<Box style={{ maxWidth: '300px' }}>
  <FileTile fileName="my-file.png" fileDescription="3.56 MB">
    <FileTileThumbnail />
    <FileTileDeleteButton accessibleText="Delete" />
  </FileTile>
</Box>

<Box style={{ maxWidth: '300px' }}>
  <FileTile fileName="my-file.png" fileDescription="3.56 MB">
    <FileTileThumbnail />
    <FileTileDeleteButton accessibleText="Delete" />
  </FileTile>
</Box>

<div class="" style="max-width: 300px;">
  <div
    class="swan-card swan-card-bordered swan-file-tile swan-file-tile-skin-standard swan-file-tile-layout-thumb"
  >
    <span class="swan-spinner swan-file-tile-spinner"
      ><span class="swan-spinner-animation"
        ><span class="swan-spinner-animation-inner"></span></span
      ><span class="swan-spinner-text">Waiting</span></span
    >
    <div class="swan-file-tile-thumbnail">
      <img
        src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
        alt=""
        draggable="false"
        class="swan-icon swan-icon-mask swan-icon-skin-standard swan-icon-type-fileGeneric swan-file-tile-icon"
        style='mask-image: url("https://swan.prod.merch.vpsvc.com/v3/icons/file_generic.29b7e1fb6fe439dec9be97c8e86b0a64.svg");'
      /><img
        src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
        alt=""
        draggable="false"
        class="swan-icon swan-icon-mask swan-icon-skin-error swan-icon-type-error swan-file-tile-icon-error"
        style='mask-image: url("https://swan.prod.merch.vpsvc.com/v3/icons/error.a65ada8992e9179959b2a8ff63f54ae5.svg");'
      />
    </div>
    <button
      type="button"
      aria-label=""
      class="swan-icon-button swan-icon-button-skin-destructive-secondary swan-file-tile-delete-button"
    >
      <img
        src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
        alt=""
        draggable="false"
        class="swan-icon swan-icon-mask swan-icon-skin-standard swan-icon-type-delete"
        style='mask-image: url("https://swan.prod.merch.vpsvc.com/v3/icons/delete.c5e398c71cc1b21c4c5b47f23b9722bc.svg");'
      />
    </button>
    <div class="swan-file-tile-details">
      <div class="swan-font-skin-title-item swan-file-tile-name">
        my-file.png
      </div>
      <div
        class="swan-font-skin-body-small swan-text-color-subtle swan-file-tile-description"
      >
        3.56 MB
      </div>
      <div class="swan-file-tile-progress-container">
        <progress
          max="100"
          value="0"
          aria-label="100% loaded"
          class="swan-progress"
        ></progress>
      </div>
    </div>
  </div>
</div>

<div class="" style="max-width: 300px;">
  <div
    class="swan-card swan-card-bordered swan-file-tile swan-file-tile-skin-standard swan-file-tile-layout-thumb"
  >
    <span class="swan-spinner swan-file-tile-spinner"
      ><span class="swan-spinner-animation"
        ><span class="swan-spinner-animation-inner"></span></span
      ><span class="swan-spinner-text">Waiting</span></span
    >
    <div class="swan-file-tile-thumbnail">
      <img
        src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
        alt=""
        draggable="false"
        class="swan-icon swan-icon-mask swan-icon-skin-standard swan-icon-type-fileGeneric swan-file-tile-icon"
        style='mask-image: url("https://swan.prod.merch.vpsvc.com/v3/icons/file_generic.29b7e1fb6fe439dec9be97c8e86b0a64.svg");'
      /><img
        src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
        alt=""
        draggable="false"
        class="swan-icon swan-icon-mask swan-icon-skin-error swan-icon-type-error swan-file-tile-icon-error"
        style='mask-image: url("https://swan.prod.merch.vpsvc.com/v3/icons/error.a65ada8992e9179959b2a8ff63f54ae5.svg");'
      />
    </div>
    <button
      type="button"
      aria-label=""
      class="swan-icon-button swan-icon-button-skin-destructive-secondary swan-file-tile-delete-button"
    >
      <img
        src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
        alt=""
        draggable="false"
        class="swan-icon swan-icon-mask swan-icon-skin-standard swan-icon-type-delete"
        style='mask-image: url("https://swan.prod.merch.vpsvc.com/v3/icons/delete.c5e398c71cc1b21c4c5b47f23b9722bc.svg");'
      />
    </button>
    <div class="swan-file-tile-details">
      <div class="swan-font-skin-title-item swan-file-tile-name">
        my-file.png
      </div>
      <div
        class="swan-font-skin-body-small swan-text-color-subtle swan-file-tile-description"
      >
        3.56 MB
      </div>
      <div class="swan-file-tile-progress-container">
        <progress
          max="100"
          value="0"
          aria-label="100% loaded"
          class="swan-progress"
        ></progress>
      </div>
    </div>
  </div>
</div>

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.

ReactVanilla

<FormField>
  <GridContainer>
    <Row>
      <Column span={6} spanLg={4} spanXl={3} mb={5}>
        <FileTile fileName="my-file.png" fileDescription="3.56 MB">
          <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"
        >
          <FileTileThumbnail />
          <FileTileDeleteButton />
        </FileTile>
      </Column>
      <Column span={6} spanLg={4} spanXl={3} mb={5}>
        <FileTile
          skin="queued"
          fileName="my-file.png"
          fileDescription="3.56 MB"
        >
          <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">
          <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"
        >
          <FileTileThumbnail />
          <FileTileDeleteButton />
        </FileTile>
      </Column>
      <Column span={6} spanLg={4} spanXl={3} mb={5}>
        <FileTile
          skin="queued"
          fileName="my-file.png"
          fileDescription="3.56 MB"
        >
          <FileTileThumbnail />
          <FileTileDeleteButton />
        </FileTile>
      </Column>
    </Row>
  </GridContainer>
</FormField>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-6 swan-col-lg-4 swan-col-xl-3 swan-mb-5">
      <div
        class="swan-card swan-card-bordered swan-file-tile swan-file-tile-skin-standard swan-file-tile-layout-thumb"
      >
        <span class="swan-spinner swan-file-tile-spinner"
          ><span class="swan-spinner-animation"
            ><span class="swan-spinner-animation-inner"></span></span
          ><span class="swan-spinner-text">Waiting</span></span
        >
        <div class="swan-file-tile-thumbnail">
          <img
            src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
            alt=""
            draggable="false"
            class="swan-icon swan-icon-mask swan-icon-skin-standard swan-icon-type-fileGeneric swan-file-tile-icon"
            style='mask-image: url("https://swan.prod.merch.vpsvc.com/v3/icons/file_generic.29b7e1fb6fe439dec9be97c8e86b0a64.svg");'
          /><img
            src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
            alt=""
            draggable="false"
            class="swan-icon swan-icon-mask swan-icon-skin-error swan-icon-type-error swan-file-tile-icon-error"
            style='mask-image: url("https://swan.prod.merch.vpsvc.com/v3/icons/error.a65ada8992e9179959b2a8ff63f54ae5.svg");'
          />
        </div>
        <button
          type="button"
          aria-label=""
          class="swan-icon-button swan-icon-button-skin-destructive-secondary swan-file-tile-delete-button"
        >
          <img
            src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
            alt=""
            draggable="false"
            class="swan-icon swan-icon-mask swan-icon-skin-standard swan-icon-type-delete"
            style='mask-image: url("https://swan.prod.merch.vpsvc.com/v3/icons/delete.c5e398c71cc1b21c4c5b47f23b9722bc.svg");'
          />
        </button>
        <div class="swan-file-tile-details">
          <div class="swan-font-skin-title-item swan-file-tile-name">
            my-file.png
          </div>
          <div
            class="swan-font-skin-body-small swan-text-color-subtle swan-file-tile-description"
          >
            3.56 MB
          </div>
          <div class="swan-file-tile-progress-container">
            <progress
              max="100"
              value="0"
              aria-label="100% loaded"
              class="swan-progress"
            ></progress>
          </div>
        </div>
      </div>
    </div>
    <div class="swan-col-6 swan-col-lg-4 swan-col-xl-3 swan-mb-5">
      <div
        class="swan-card swan-card-bordered swan-file-tile swan-file-tile-skin-loading swan-file-tile-layout-thumb"
      >
        <span class="swan-spinner swan-file-tile-spinner"
          ><span class="swan-spinner-animation"
            ><span class="swan-spinner-animation-inner"></span></span
          ><span class="swan-spinner-text">Waiting</span></span
        >
        <div class="swan-file-tile-thumbnail">
          <img
            src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
            alt=""
            draggable="false"
            class="swan-icon swan-icon-mask swan-icon-skin-standard swan-icon-type-fileGeneric swan-file-tile-icon"
            style='mask-image: url("https://swan.prod.merch.vpsvc.com/v3/icons/file_generic.29b7e1fb6fe439dec9be97c8e86b0a64.svg");'
          /><img
            src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
            alt=""
            draggable="false"
            class="swan-icon swan-icon-mask swan-icon-skin-error swan-icon-type-error swan-file-tile-icon-error"
            style='mask-image: url("https://swan.prod.merch.vpsvc.com/v3/icons/error.a65ada8992e9179959b2a8ff63f54ae5.svg");'
          />
        </div>
        <button
          type="button"
          aria-label=""
          class="swan-icon-button swan-icon-button-skin-destructive-secondary swan-file-tile-delete-button"
        >
          <img
            src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
            alt=""
            draggable="false"
            class="swan-icon swan-icon-mask swan-icon-skin-standard swan-icon-type-delete"
            style='mask-image: url("https://swan.prod.merch.vpsvc.com/v3/icons/delete.c5e398c71cc1b21c4c5b47f23b9722bc.svg");'
          />
        </button>
        <div class="swan-file-tile-details">
          <div class="swan-font-skin-title-item swan-file-tile-name">
            my-file.png
          </div>
          <div
            class="swan-font-skin-body-small swan-text-color-subtle swan-file-tile-description"
          >
            3.56 MB
          </div>
          <div class="swan-file-tile-progress-container">
            <progress
              max="100"
              value="56"
              aria-label="56% loaded"
              class="swan-progress"
            ></progress>
          </div>
        </div>
      </div>
    </div>
    <div class="swan-col-6 swan-col-lg-4 swan-col-xl-3 swan-mb-5">
      <div
        class="swan-card swan-card-bordered swan-file-tile swan-file-tile-skin-queued swan-file-tile-layout-thumb"
      >
        <span class="swan-spinner swan-file-tile-spinner"
          ><span class="swan-spinner-animation"
            ><span class="swan-spinner-animation-inner"></span></span
          ><span class="swan-spinner-text">Waiting</span></span
        >
        <div class="swan-file-tile-thumbnail">
          <img
            src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
            alt=""
            draggable="false"
            class="swan-icon swan-icon-mask swan-icon-skin-standard swan-icon-type-fileGeneric swan-file-tile-icon"
            style='mask-image: url("https://swan.prod.merch.vpsvc.com/v3/icons/file_generic.29b7e1fb6fe439dec9be97c8e86b0a64.svg");'
          /><img
            src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
            alt=""
            draggable="false"
            class="swan-icon swan-icon-mask swan-icon-skin-error swan-icon-type-error swan-file-tile-icon-error"
            style='mask-image: url("https://swan.prod.merch.vpsvc.com/v3/icons/error.a65ada8992e9179959b2a8ff63f54ae5.svg");'
          />
        </div>
        <button
          type="button"
          aria-label=""
          class="swan-icon-button swan-icon-button-skin-destructive-secondary swan-file-tile-delete-button"
        >
          <img
            src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
            alt=""
            draggable="false"
            class="swan-icon swan-icon-mask swan-icon-skin-standard swan-icon-type-delete"
            style='mask-image: url("https://swan.prod.merch.vpsvc.com/v3/icons/delete.c5e398c71cc1b21c4c5b47f23b9722bc.svg");'
          />
        </button>
        <div class="swan-file-tile-details">
          <div class="swan-font-skin-title-item swan-file-tile-name">
            my-file.png
          </div>
          <div
            class="swan-font-skin-body-small swan-text-color-subtle swan-file-tile-description"
          >
            Waiting
          </div>
          <div class="swan-file-tile-progress-container">
            <progress
              max="100"
              value="0"
              aria-label="0% loaded"
              class="swan-progress"
            ></progress>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-6 swan-col-lg-4 swan-col-xl-3 swan-mb-5">
      <div
        class="swan-card swan-card-bordered swan-file-tile swan-file-tile-skin-standard swan-file-tile-layout-thumb"
      >
        <span class="swan-spinner swan-file-tile-spinner"
          ><span class="swan-spinner-animation"
            ><span class="swan-spinner-animation-inner"></span></span
          ><span class="swan-spinner-text">Waiting</span></span
        >
        <div class="swan-file-tile-thumbnail">
          <img
            src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
            alt=""
            draggable="false"
            class="swan-icon swan-icon-mask swan-icon-skin-standard swan-icon-type-fileGeneric swan-file-tile-icon"
            style='mask-image: url("https://swan.prod.merch.vpsvc.com/v3/icons/file_generic.29b7e1fb6fe439dec9be97c8e86b0a64.svg");'
          /><img
            src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
            alt=""
            draggable="false"
            class="swan-icon swan-icon-mask swan-icon-skin-error swan-icon-type-error swan-file-tile-icon-error"
            style='mask-image: url("https://swan.prod.merch.vpsvc.com/v3/icons/error.a65ada8992e9179959b2a8ff63f54ae5.svg");'
          />
        </div>
        <button
          type="button"
          aria-label=""
          class="swan-icon-button swan-icon-button-skin-destructive-secondary swan-file-tile-delete-button"
        >
          <img
            src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
            alt=""
            draggable="false"
            class="swan-icon swan-icon-mask swan-icon-skin-standard swan-icon-type-delete"
            style='mask-image: url("https://swan.prod.merch.vpsvc.com/v3/icons/delete.c5e398c71cc1b21c4c5b47f23b9722bc.svg");'
          />
        </button>
        <div class="swan-file-tile-details">
          <div class="swan-font-skin-title-item swan-file-tile-name">
            my-file.png
          </div>
          <div
            class="swan-font-skin-body-small swan-text-color-subtle swan-file-tile-description"
          >
            3.56 MB
          </div>
          <div class="swan-file-tile-progress-container">
            <progress
              max="100"
              value="0"
              aria-label="100% loaded"
              class="swan-progress"
            ></progress>
          </div>
        </div>
      </div>
    </div>
    <div class="swan-col-6 swan-col-lg-4 swan-col-xl-3 swan-mb-5">
      <div
        class="swan-card swan-card-bordered swan-file-tile swan-file-tile-skin-loading swan-file-tile-layout-thumb"
      >
        <span class="swan-spinner swan-file-tile-spinner"
          ><span class="swan-spinner-animation"
            ><span class="swan-spinner-animation-inner"></span></span
          ><span class="swan-spinner-text">Waiting</span></span
        >
        <div class="swan-file-tile-thumbnail">
          <img
            src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
            alt=""
            draggable="false"
            class="swan-icon swan-icon-mask swan-icon-skin-standard swan-icon-type-fileGeneric swan-file-tile-icon"
            style='mask-image: url("https://swan.prod.merch.vpsvc.com/v3/icons/file_generic.29b7e1fb6fe439dec9be97c8e86b0a64.svg");'
          /><img
            src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
            alt=""
            draggable="false"
            class="swan-icon swan-icon-mask swan-icon-skin-error swan-icon-type-error swan-file-tile-icon-error"
            style='mask-image: url("https://swan.prod.merch.vpsvc.com/v3/icons/error.a65ada8992e9179959b2a8ff63f54ae5.svg");'
          />
        </div>
        <button
          type="button"
          aria-label=""
          class="swan-icon-button swan-icon-button-skin-destructive-secondary swan-file-tile-delete-button"
        >
          <img
            src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
            alt=""
            draggable="false"
            class="swan-icon swan-icon-mask swan-icon-skin-standard swan-icon-type-delete"
            style='mask-image: url("https://swan.prod.merch.vpsvc.com/v3/icons/delete.c5e398c71cc1b21c4c5b47f23b9722bc.svg");'
          />
        </button>
        <div class="swan-file-tile-details">
          <div class="swan-font-skin-title-item swan-file-tile-name">
            my-file.png
          </div>
          <div
            class="swan-font-skin-body-small swan-text-color-subtle swan-file-tile-description"
          >
            3.56 MB
          </div>
          <div class="swan-file-tile-progress-container">
            <progress
              max="100"
              value="56"
              aria-label="56% loaded"
              class="swan-progress"
            ></progress>
          </div>
        </div>
      </div>
    </div>
    <div class="swan-col-6 swan-col-lg-4 swan-col-xl-3 swan-mb-5">
      <div
        class="swan-card swan-card-bordered swan-file-tile swan-file-tile-skin-queued swan-file-tile-layout-thumb"
      >
        <span class="swan-spinner swan-file-tile-spinner"
          ><span class="swan-spinner-animation"
            ><span class="swan-spinner-animation-inner"></span></span
          ><span class="swan-spinner-text">Waiting</span></span
        >
        <div class="swan-file-tile-thumbnail">
          <img
            src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
            alt=""
            draggable="false"
            class="swan-icon swan-icon-mask swan-icon-skin-standard swan-icon-type-fileGeneric swan-file-tile-icon"
            style='mask-image: url("https://swan.prod.merch.vpsvc.com/v3/icons/file_generic.29b7e1fb6fe439dec9be97c8e86b0a64.svg");'
          /><img
            src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
            alt=""
            draggable="false"
            class="swan-icon swan-icon-mask swan-icon-skin-error swan-icon-type-error swan-file-tile-icon-error"
            style='mask-image: url("https://swan.prod.merch.vpsvc.com/v3/icons/error.a65ada8992e9179959b2a8ff63f54ae5.svg");'
          />
        </div>
        <button
          type="button"
          aria-label=""
          class="swan-icon-button swan-icon-button-skin-destructive-secondary swan-file-tile-delete-button"
        >
          <img
            src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
            alt=""
            draggable="false"
            class="swan-icon swan-icon-mask swan-icon-skin-standard swan-icon-type-delete"
            style='mask-image: url("https://swan.prod.merch.vpsvc.com/v3/icons/delete.c5e398c71cc1b21c4c5b47f23b9722bc.svg");'
          />
        </button>
        <div class="swan-file-tile-details">
          <div class="swan-font-skin-title-item swan-file-tile-name">
            my-file.png
          </div>
          <div
            class="swan-font-skin-body-small swan-text-color-subtle swan-file-tile-description"
          >
            Waiting
          </div>
          <div class="swan-file-tile-progress-container">
            <progress
              max="100"
              value="0"
              aria-label="0% loaded"
              class="swan-progress"
            ></progress>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

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"
  >
    <FileTileThumbnail />
    <FileTileDeleteButton />
  </FileTile>
</FormField>

<FormField>
  <FileTile
    style={{ maxWidth: '300px' }}
    skin="error"
    errorMessage="Failed to upload image"
    fileName="my-file.png"
    fileDescription="3.56 MB"
  >
    <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">
  <FileTileThumbnail />
  <FileTileDeleteButton />
</FileTile>

<FileTile layout="list" fileName="my-file.png" fileDescription="3.56 MB">
  <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">
            <FileTileThumbnail>
              <ResponsiveImage src="/example-images/1x1.webp" />
            </FileTileThumbnail>
            <FileTileDeleteButton />
          </FileTile>
          <FileTile
            layout="list"
            fileName="my-file.png"
            fileDescription="3.56 MB"
          >
            <FileTileThumbnail>
              <ResponsiveImage src="/example-images/1x1.webp" />
            </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">
            <FileTileThumbnail>
              <ResponsiveImage src="/example-images/9x16.webp" />
            </FileTileThumbnail>
            <FileTileDeleteButton />
          </FileTile>
          <FileTile
            layout="list"
            fileName="my-file.png"
            fileDescription="3.56 MB"
          >
            <FileTileThumbnail>
              <ResponsiveImage src="/example-images/9x16.webp" />
            </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">
            <FileTileThumbnail>
              <ResponsiveImage src="/example-images/16x9.webp" />
            </FileTileThumbnail>
            <FileTileDeleteButton />
          </FileTile>
          <FileTile
            layout="list"
            fileName="my-file.png"
            fileDescription="3.56 MB"
          >
            <FileTileThumbnail>
              <ResponsiveImage src="/example-images/16x9.webp" />
            </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">
            <FileTileThumbnail>
              <ResponsiveImage src="/example-images/1x1.webp" />
            </FileTileThumbnail>
            <FileTileDeleteButton />
          </FileTile>
          <FileTile
            layout="list"
            fileName="my-file.png"
            fileDescription="3.56 MB"
          >
            <FileTileThumbnail>
              <ResponsiveImage src="/example-images/1x1.webp" />
            </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">
            <FileTileThumbnail>
              <ResponsiveImage src="/example-images/9x16.webp" />
            </FileTileThumbnail>
            <FileTileDeleteButton />
          </FileTile>
          <FileTile
            layout="list"
            fileName="my-file.png"
            fileDescription="3.56 MB"
          >
            <FileTileThumbnail>
              <ResponsiveImage src="/example-images/9x16.webp" />
            </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">
            <FileTileThumbnail>
              <ResponsiveImage src="/example-images/16x9.webp" />
            </FileTileThumbnail>
            <FileTileDeleteButton />
          </FileTile>
          <FileTile
            layout="list"
            fileName="my-file.png"
            fileDescription="3.56 MB"
          >
            <FileTileThumbnail>
              <ResponsiveImage src="/example-images/16x9.webp" />
            </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">
        <FileTileThumbnail />
        <FileTileDeleteButton />
      </FileTile>
    </Column>
    <Column span={6} spanXs={12}>
      <FileTile fileName="my-other-file.png" fileDescription="600px x 400px">
        <FileTileThumbnail />
        <FileTileDeleteButton />
      </FileTile>
    </Column>
  </Row>
</GridContainer>

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

File Upload pattern

File Tile is part of a larger pattern of uploading files. The File Upload pattern ensures users are presented with a consistent UI regardless of the file types uploaded or the specific page navigated to.

For more information, see File Upload.

<GridContainer>
  <Row>
    <Column span={12}>
      <StandardForm>
        <GridContainer>
          <Row mb="between-subsections">
            <Column span={12}>
              <FormField>
                <FormInputGroup>
                  <FileDropzone
                    multiFileErrorMessage="Upload only one file"
                    aria-label="Dropzone"
                  >
                    <FileInput multiple>
                      <FileInputLabel iconPosition="left">
                        <Icon iconType="upload" /> Upload from device
                      </FileInputLabel>
                    </FileInput>
                  </FileDropzone>
                  <FormHelper>
                    Accepted file formats: JPG, JPEG, BMP, PNG, GIF, HEIC
                  </FormHelper>
                </FormInputGroup>
              </FormField>
            </Column>
          </Row>
          <Row verticalGap="matchGutter">
            <Column spanXs={6} spanSm={4} spanMd={4} span={3} spanXl={2}>
              <FileTile
                skin="loading"
                progressValue={40}
                fileName="my-file.png"
                fileDescription="3.56 MB"
              >
                <FileTileThumbnail>
                  <ResponsiveImage src="/example-images/1x1.webp" />
                </FileTileThumbnail>
                <FileTileDeleteButton />
              </FileTile>
            </Column>
            <Column spanXs={6} spanSm={4} spanMd={4} span={3} spanXl={2}>
              <FileTile fileName="my-file.png" fileDescription="3.56 MB">
                <FileTileThumbnail>
                  <ResponsiveImage src="/example-images/5x4.webp" />
                </FileTileThumbnail>
                <FileTileDeleteButton />
              </FileTile>
            </Column>
            <Column spanXs={6} spanSm={4} spanMd={4} span={3} spanXl={2}>
              <FileTile fileName="my-file.png" fileDescription="3.56 MB">
                <FileTileThumbnail>
                  <ResponsiveImage src="/example-images/9x16.webp" />
                </FileTileThumbnail>
                <FileTileDeleteButton />
              </FileTile>
            </Column>
            <Column spanXs={6} spanSm={4} spanMd={4} span={3} spanXl={2}>
              <FileTile fileName="my-file.png" fileDescription="3.56 MB">
                <FileTileThumbnail>
                  <ResponsiveImage src="/example-images/16x9.webp" />
                </FileTileThumbnail>
                <FileTileDeleteButton />
              </FileTile>
            </Column>
            <Column spanXs={6} spanSm={4} spanMd={4} span={3} spanXl={2}>
              <FileTile fileName="my-file.png" fileDescription="3.56 MB">
                <FileTileThumbnail>
                  <ResponsiveImage src="/example-images/1x1-2.webp" />
                </FileTileThumbnail>
                <FileTileDeleteButton />
              </FileTile>
            </Column>
            <Column spanXs={6} spanSm={4} spanMd={4} span={3} spanXl={2}>
              <FileTile fileName="my-file.png" fileDescription="3.56 MB">
                <FileTileThumbnail>
                  <ResponsiveImage src="/example-images/5x4-2.webp" />
                </FileTileThumbnail>
                <FileTileDeleteButton />
              </FileTile>
            </Column>
          </Row>
        </GridContainer>
      </StandardForm>
    </Column>
  </Row>
</GridContainer>

<GridContainer>
  <Row>
    <Column span={12}>
      <StandardForm>
        <GridContainer>
          <Row mb="between-subsections">
            <Column span={12}>
              <FormField>
                <FormInputGroup>
                  <FileDropzone
                    multiFileErrorMessage="Upload only one file"
                    aria-label="Dropzone"
                  >
                    <FileInput multiple>
                      <FileInputLabel iconPosition="left">
                        <Icon iconType="upload" /> Upload from device
                      </FileInputLabel>
                    </FileInput>
                  </FileDropzone>
                  <FormHelper>
                    Accepted file formats: JPG, JPEG, BMP, PNG, GIF, HEIC
                  </FormHelper>
                </FormInputGroup>
              </FormField>
            </Column>
          </Row>
          <Row verticalGap="matchGutter">
            <Column spanXs={6} spanSm={4} spanMd={4} span={3} spanXl={2}>
              <FileTile
                skin="loading"
                progressValue={40}
                fileName="my-file.png"
                fileDescription="3.56 MB"
              >
                <FileTileThumbnail>
                  <ResponsiveImage src="/example-images/1x1.webp" />
                </FileTileThumbnail>
                <FileTileDeleteButton />
              </FileTile>
            </Column>
            <Column spanXs={6} spanSm={4} spanMd={4} span={3} spanXl={2}>
              <FileTile fileName="my-file.png" fileDescription="3.56 MB">
                <FileTileThumbnail>
                  <ResponsiveImage src="/example-images/5x4.webp" />
                </FileTileThumbnail>
                <FileTileDeleteButton />
              </FileTile>
            </Column>
            <Column spanXs={6} spanSm={4} spanMd={4} span={3} spanXl={2}>
              <FileTile fileName="my-file.png" fileDescription="3.56 MB">
                <FileTileThumbnail>
                  <ResponsiveImage src="/example-images/9x16.webp" />
                </FileTileThumbnail>
                <FileTileDeleteButton />
              </FileTile>
            </Column>
            <Column spanXs={6} spanSm={4} spanMd={4} span={3} spanXl={2}>
              <FileTile fileName="my-file.png" fileDescription="3.56 MB">
                <FileTileThumbnail>
                  <ResponsiveImage src="/example-images/16x9.webp" />
                </FileTileThumbnail>
                <FileTileDeleteButton />
              </FileTile>
            </Column>
            <Column spanXs={6} spanSm={4} spanMd={4} span={3} spanXl={2}>
              <FileTile fileName="my-file.png" fileDescription="3.56 MB">
                <FileTileThumbnail>
                  <ResponsiveImage src="/example-images/1x1-2.webp" />
                </FileTileThumbnail>
                <FileTileDeleteButton />
              </FileTile>
            </Column>
            <Column spanXs={6} spanSm={4} spanMd={4} span={3} spanXl={2}>
              <FileTile fileName="my-file.png" fileDescription="3.56 MB">
                <FileTileThumbnail>
                  <ResponsiveImage src="/example-images/5x4-2.webp" />
                </FileTileThumbnail>
                <FileTileDeleteButton />
              </FileTile>
            </Column>
          </Row>
        </GridContainer>
      </StandardForm>
    </Column>
  </Row>
</GridContainer>

prop	type	required	default	deprecation notes
`fileName` The name of the file	`string`	true	null
⚠️ Deprecated `accessibleTextForProgress` @deprecated This prop will be removed in favor of SWAN's i18n system. Please opt in to the i18n system for continued support. The localized accessible text for the Progress component	`string`	false	null	This prop will be removed in favor of SWAN's i18n system. Please opt in to the i18n system for continued support.
⚠️ Deprecated `accessibleTextForSpinner` @deprecated This prop will be removed in favor of SWAN's i18n system. Please opt in to the i18n system for continued support. The localized accessible text for the Spinner component	`string`	false	null	This prop will be removed in favor of SWAN's i18n system. Please opt in to the i18n system for continued support.
`fileDescription` The description of the file, could be file size or dimensions e.g. "3.56 MB" or "600x400"	`stringnull`	false	null
`layout` The visual layout of the FileTile	`"list""thumb"null`	false	thumb
`skin` The visual style of the FileTile	`"standard""loading""error""queued"null`	false	standard
`progressValue` The percentage of progress of the file upload	`numbernull`	false	null
`errorMessage` Error message on file upload failure	`stringnull`	false	null

Default Text	Key
File upload is {{progress}} complete	`file-tile.accessible-text-for-progress`
Waiting to upload	`file-tile.accessible-text-for-spinner`
Delete file	`file-tile-delete-button.accessible-text-for-icon`