input file upload

The file upload input element let the user choose one or more files from their device storage. These selected files can be uploaded to a server through form submission or be manipulated using the Javascript File API.

table of content

component variations

input file upload

Open on blank page

No file chosen

<div class="a-file-upload-input">
  <label for="file-upload-input-1">
    <i class="a-icon boschicon-bosch-ic-upload"></i>
    Choose file
  </label>
  <input id="file-upload-input-1" name="input file upload" type="file" />
  <div class="a-file-upload-input__preview"><p>No file chosen</p></div>
</div>

input file upload disabled

Open on blank page

No file chosen

<div class="a-file-upload-input a-file-upload-input--disabled">
  <label for="file-upload-input-2">
    <i class="a-icon boschicon-bosch-ic-upload"></i>
    Choose file
  </label>
  <input
    id="file-upload-input-2"
    name="input file upload disabled"
    type="file"
    disabled=""
  />
  <div class="a-file-upload-input__preview"><p>No file chosen</p></div>
</div>

input file upload with very long label

Open on blank page

No file chosen

<div class="a-file-upload-input">
  <label for="file-upload-input-3">
    <i class="a-icon boschicon-bosch-ic-upload"></i>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae omnis labore
    consequatur distinctio provident voluptatum nisi recusandae quod asperiores
    quo, architecto cum nesciunt nemo, vel minima possimus et blanditiis
    numquam, cupiditate deserunt fugit delectus earum ducimus alias! Quam atque
    laborum tempore alias magnam tenetur fuga facere totam, harum, ipsa sit!
  </label>
  <input
    id="file-upload-input-3"
    name="input file upload with very long label"
    type="file"
  />
  <div class="a-file-upload-input__preview"><p>No file chosen</p></div>
</div>

input file upload with very long label disabled

Open on blank page

No file chosen

<div class="a-file-upload-input a-file-upload-input--disabled">
  <label for="file-upload-input-4">
    <i class="a-icon boschicon-bosch-ic-upload"></i>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae omnis labore
    consequatur distinctio provident voluptatum nisi recusandae quod asperiores
    quo, architecto cum nesciunt nemo, vel minima possimus et blanditiis
    numquam, cupiditate deserunt fugit delectus earum ducimus alias! Quam atque
    laborum tempore alias magnam tenetur fuga facere totam, harum, ipsa sit!
  </label>
  <input
    id="file-upload-input-4"
    name="input file upload with very long label disabled"
    type="file"
    disabled=""
  />
  <div class="a-file-upload-input__preview"><p>No file chosen</p></div>
</div>

additional content

styles SCSS

.a-file-upload-input {
  align-items: center;
  display: flex;

  label {
    background-color: var(--minor-accent__enabled__fill__default);
    border: 1px solid var(--minor-accent__enabled__front__default);
    color: var(--minor-accent__enabled__front__default);
    cursor: pointer;
    display: inline-flex;
    font-size: 1rem;
    --font-size: 1rem;
    padding: 0.6875rem 0.9375rem;

    .a-icon {
      padding-right: 0.75rem;
    }

    &:hover {
      background-color: var(--minor-accent__enabled__fill__hovered);
      border-color: var(--minor-accent__enabled__front__hovered);
      color: var(--minor-accent__enabled__front__hovered);
    }

    &:active {
      background-color: var(--minor-accent__enabled__fill__pressed);
      border-color: var(--minor-accent__enabled__front__pressed);
      color: var(--minor-accent__enabled__front__pressed);
    }
  }

  &.-focus-visible {
    @include focus-outside;
  }

  &--disabled {
    color: var(--minor-accent__disabled__front__default);
    pointer-events: none;

    label {
      border: 1px solid var(--minor-accent__disabled__front__default);
      color: var(--minor-accent__disabled__front__default);
    }
  }

  input[type='file'] {
    height: 0;
    opacity: 0;
    width: 0;
    -moz-appearance: none;
  }

  &__preview {
    margin-left: 1rem;

    p {
      margin-block: 0.75rem;
    }
  }
}