Upload File Box

Upload File Box allows users to select and upload a file to a specific location.

Class Type
upload-file-box Upload File Box A class representing an upload file box

Components

Upload File Boxes consist of eight components:

Class Type
upload-file-box Partial container
upload-file-box-image Image
upload-file-box-title Title
upload-file-box-info Info
upload-file-box-list List
upload-file-box-name File Name
upload-file-box-size File Size
is-hover-with-file Hover State

Default

Drag and drop files here to upload Upload a File

Max file size: 10MB

<div
  class="box is-border-dashed is-no-shadow u-padding-24"
  style="--box-border-radius:var(--border-radius-xsmall);"
>
  <div class="upload-file-box">
    <div class="upload-file-box-image"><span class="icon-upload" aria-hidden="true"></span></div>
    <div class="u-min-width-0 u-text-center">
      <h5 class="upload-file-box-title heading-level-7 u-inline">
        <span class="is-only-desktop">Drag and drop files here to upload</span>
        <span class="is-not-desktop">Upload a File</span>
      </h5>
      <button class="tooltip u-inline u-margin-inline-start-4" aria-label="variables info">
        <span class="icon-info" aria-hidden="true"></span>
        <span class="tooltip-popup" role="tooltip">Only PNGs accepted.</span>
      </button>
    </div>
    <div class="u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile">
      <p class="upload-file-box-info body-text-2">Max file size: 10MB</p>
      <button class="button is-secondary is-full-width-mobile">
        <span class="text">Choose a file</span>
      </button>
    </div>
  </div>
</div>

File Added

Drag and drop files here to upload Upload a File

Max file size: 10MB

  • pink-floyd-cover .png 4MB
<div
  class="box is-border-dashed is-no-shadow u-padding-24"
  style="--box-border-radius:var(--border-radius-xsmall);"
>
  <div class="upload-file-box">
    <div class="upload-file-box-image"><span class="icon-upload" aria-hidden="true"></span></div>
    <div class="u-min-width-0 u-text-center">
      <h5 class="upload-file-box-title heading-level-7 u-inline">
        <span class="is-only-desktop">Drag and drop files here to upload</span>
        <span class="is-not-desktop">Upload a File</span>
      </h5>
      <button class="tooltip u-inline u-margin-inline-start-4" aria-label="variables info">
        <span class="icon-info" aria-hidden="true"></span>
        <span class="tooltip-popup" role="tooltip">Only PNGs accepted.</span>
      </button>
    </div>
    <div class="u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile">
      <p class="upload-file-box-info body-text-2">Max file size: 10MB</p>
      <button class="button is-secondary is-full-width-mobile">
        <span class="text">Choose a file</span>
      </button>
    </div>
    <ul class="upload-file-box-list u-min-width-0">
      <li class="u-flex u-cross-center u-min-width-0">
        <span class="icon-document" aria-hidden="true"></span>
        <span class="upload-file-box-name u-trim u-min-width-0">pink-floyd-cover</span>
        <span class="upload-file-box-name u-min-width-0 u-flex-shrink-0">.png</span>
        <span class="upload-file-box-size u-margin-inline-start-4 u-margin-inline-end-16">4MB</span>
        <button
          type="button"
          class="button is-text is-only-icon u-margin-inline-start-auto"
          aria-label="remove file"
          style="--button-size:1.5rem;"
        >
          <span class="icon-x" aria-hidden="true"></span>
        </button>
      </li>
    </ul>
  </div>
</div>

Error

Drag and drop files here to upload Upload a File

Max file size: 10MB

  • pink-floyd-cover .png 4MB

Display a contextual error message here

<div
  class="box is-border-dashed is-no-shadow u-padding-24"
  style="--box-border-radius:var(--border-radius-xsmall);"
>
  <div class="upload-file-box">
    <div class="upload-file-box-image"><span class="icon-upload" aria-hidden="true"></span></div>
    <div class="u-min-width-0 u-text-center">
      <h5 class="upload-file-box-title heading-level-7 u-inline">
        <span class="is-only-desktop">Drag and drop files here to upload</span>
        <span class="is-not-desktop">Upload a File</span>
      </h5>
      <button class="tooltip u-inline u-margin-inline-start-4" aria-label="variables info">
        <span class="icon-info" aria-hidden="true"></span>
        <span class="tooltip-popup" role="tooltip">Only PNGs accepted.</span>
      </button>
    </div>
    <div class="u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile">
      <p class="upload-file-box-info body-text-2">Max file size: 10MB</p>
      <button class="button is-secondary is-full-width-mobile">
        <span class="text">Choose a file</span>
      </button>
    </div>
    <ul class="upload-file-box-list u-min-width-0">
      <li class="u-flex u-cross-center u-min-width-0">
        <span class="icon-document" aria-hidden="true"></span>
        <span class="upload-file-box-name u-trim u-min-width-0">pink-floyd-cover</span>
        <span class="upload-file-box-name u-min-width-0 u-flex-shrink-0">.png</span>
        <span class="upload-file-box-size u-margin-inline-start-4 u-margin-inline-end-16">4MB</span>
        <button
          type="button"
          class="button is-text is-only-icon u-margin-inline-start-auto"
          aria-label="remove file"
          style="--button-size:1.5rem;"
        >
          <span class="icon-x" aria-hidden="true"></span>
        </button>
      </li>
    </ul>
  </div>
</div>
<p class="helper u-color-text-danger u-margin-block-start-8">
  <span class="icon-exclamation-circle" aria-hidden="true"></span>
  <span class="text">Display a contextual error message here</span>
</p>