File upload

A custom file upload input, without JavaScript

Experimental
Colors Yes
Sizes Yes
Variables Yes

The file element is a simple interactive label that wraps an <input type="file">. It comprises several sub-elements:

  • file the main container
    • file-label the actual interactive and clickable part of the element
      • file-input the native file input, hidden for styling purposes
      • file-cta the upload call-to-action
        • file-icon an optional upload icon
        • file-label the "Choose a file…" text
      • file-name a container for the chosen file name
<div class="file">
  <label class="file-label">
    <input class="file-input" type="file" name="resume">
    <span class="file-cta">
      <span class="file-icon">
        <i class="fas fa-upload"></i>
      </span>
      <span class="file-label">
        Choose a file…
      </span>
    </span>
  </label>
</div>

Modifiers #

With the has-name modifier combined with the file-name element, you can add a placeholder for the selected file name.

<div class="file has-name">
  <label class="file-label">
    <input class="file-input" type="file" name="resume">
    <span class="file-cta">
      <span class="file-icon">
        <i class="fas fa-upload"></i>
      </span>
      <span class="file-label">
        Choose a file…
      </span>
    </span>
    <span class="file-name">
      Screen Shot 2017-07-29 at 15.54.25.png
    </span>
  </label>
</div>

You can move the CTA to the right side with the is-right modifier.

<div class="file has-name is-right">
  <label class="file-label">
    <input class="file-input" type="file" name="resume">
    <span class="file-cta">
      <span class="file-icon">
        <i class="fas fa-upload"></i>
      </span>
      <span class="file-label">
        Choose a file…
      </span>
    </span>
    <span class="file-name">
      Screen Shot 2017-07-29 at 15.54.25.png
    </span>
  </label>
</div>

You can also expand the name to fill up the space with the is-fullwidth modifier.

<div class="file has-name is-fullwidth">
  <label class="file-label">
    <input class="file-input" type="file" name="resume">
    <span class="file-cta">
      <span class="file-icon">
        <i class="fas fa-upload"></i>
      </span>
      <span class="file-label">
        Choose a file…
      </span>
    </span>
    <span class="file-name">
      Screen Shot 2017-07-29 at 15.54.25.png
    </span>
  </label>
</div>

You can have a boxed block with the is-boxed modifier.

<div class="file is-boxed">
  <label class="file-label">
    <input class="file-input" type="file" name="resume">
    <span class="file-cta">
      <span class="file-icon">
        <i class="fas fa-upload"></i>
      </span>
      <span class="file-label">
        Choose a file…
      </span>
    </span>
  </label>
</div>

You can combine has-name and is-boxed.

<div class="file has-name is-boxed">
  <label class="file-label">
    <input class="file-input" type="file" name="resume">
    <span class="file-cta">
      <span class="file-icon">
        <i class="fas fa-upload"></i>
      </span>
      <span class="file-label">
        Choose a file…
      </span>
    </span>
    <span class="file-name">
      Screen Shot 2017-07-29 at 15.54.25.png
    </span>
  </label>
</div>

Colors #

You can style the file element by appending one of the 10 color modifiers:

  • is-white
  • is-black
  • is-light
  • is-dark
  • is-primary
  • is-link
  • is-info
  • is-success
  • is-warning
  • is-danger
<div class="field">
  <div class="file is-primary">
    <label class="file-label">
      <input class="file-input" type="file" name="resume">
      <span class="file-cta">
        <span class="file-icon">
          <i class="fas fa-upload"></i>
        </span>
        <span class="file-label">
          Primary file…
        </span>
      </span>
    </label>
  </div>
</div>

<div class="field">
  <div class="file is-info has-name">
    <label class="file-label">
      <input class="file-input" type="file" name="resume">
      <span class="file-cta">
        <span class="file-icon">
          <i class="fas fa-upload"></i>
        </span>
        <span class="file-label">
          Info file…
        </span>
      </span>
      <span class="file-name">
        Screen Shot 2017-07-29 at 15.54.25.png
      </span>
    </label>
  </div>
</div>

<div class="field">
  <div class="file is-warning is-boxed">
    <label class="file-label">
      <input class="file-input" type="file" name="resume">
      <span class="file-cta">
        <span class="file-icon">
          <i class="fas fa-cloud-upload-alt"></i>
        </span>
        <span class="file-label">
          Warning file…
        </span>
      </span>
    </label>
  </div>
</div>

<div class="field">
  <div class="file is-danger has-name is-boxed">
    <label class="file-label">
      <input class="file-input" type="file" name="resume">
      <span class="file-cta">
        <span class="file-icon">
          <i class="fas fa-cloud-upload-alt"></i>
        </span>
        <span class="file-label">
          Danger file…
        </span>
      </span>
      <span class="file-name">
        Screen Shot 2017-07-29 at 15.54.25.png
      </span>
    </label>
  </div>
</div>

Sizes #

You can append one of 3 additional sizes:

  • is-small
  • is-medium
  • is-large
<div class="field">
  <div class="file is-small">
    <label class="file-label">
      <input class="file-input" type="file" name="resume">
      <span class="file-cta">
        <span class="file-icon">
          <i class="fas fa-upload"></i>
        </span>
        <span class="file-label">
          Small file…
        </span>
      </span>
    </label>
  </div>
</div>

<div class="field">
  <div class="file">
    <label class="file-label">
      <input class="file-input" type="file" name="resume">
      <span class="file-cta">
        <span class="file-icon">
          <i class="fas fa-upload"></i>
        </span>
        <span class="file-label">
          Normal file…
        </span>
      </span>
    </label>
  </div>
</div>

<div class="field">
  <div class="file is-medium">
    <label class="file-label">
      <input class="file-input" type="file" name="resume">
      <span class="file-cta">
        <span class="file-icon">
          <i class="fas fa-upload"></i>
        </span>
        <span class="file-label">
          Medium file…
        </span>
      </span>
    </label>
  </div>
</div>

<div class="field">
  <div class="file is-large">
    <label class="file-label">
      <input class="file-input" type="file" name="resume">
      <span class="file-cta">
        <span class="file-icon">
          <i class="fas fa-upload"></i>
        </span>
        <span class="file-label">
          Large file…
        </span>
      </span>
    </label>
  </div>
</div>
<div class="field">
  <div class="file is-small has-name">
    <label class="file-label">
      <input class="file-input" type="file" name="resume">
      <span class="file-cta">
        <span class="file-icon">
          <i class="fas fa-upload"></i>
        </span>
        <span class="file-label">
          Small file…
        </span>
      </span>
      <span class="file-name">
        Screen Shot 2017-07-29 at 15.54.25.png
      </span>
    </label>
  </div>
</div>

<div class="field">
  <div class="file has-name">
    <label class="file-label">
      <input class="file-input" type="file" name="resume">
      <span class="file-cta">
        <span class="file-icon">
          <i class="fas fa-upload"></i>
        </span>
        <span class="file-label">
          Normal file…
        </span>
      </span>
      <span class="file-name">
        Screen Shot 2017-07-29 at 15.54.25.png
      </span>
    </label>
  </div>
</div>

<div class="field">
  <div class="file is-medium has-name">
    <label class="file-label">
      <input class="file-input" type="file" name="resume">
      <span class="file-cta">
        <span class="file-icon">
          <i class="fas fa-upload"></i>
        </span>
        <span class="file-label">
          Medium file…
        </span>
      </span>
      <span class="file-name">
        Screen Shot 2017-07-29 at 15.54.25.png
      </span>
    </label>
  </div>
</div>

<div class="field">
  <div class="file is-large has-name">
    <label class="file-label">
      <input class="file-input" type="file" name="resume">
      <span class="file-cta">
        <span class="file-icon">
          <i class="fas fa-upload"></i>
        </span>
        <span class="file-label">
          Large file…
        </span>
      </span>
      <span class="file-name">
        Screen Shot 2017-07-29 at 15.54.25.png
      </span>
    </label>
  </div>
</div>
<div class="field">
  <div class="file is-small is-boxed">
    <label class="file-label">
      <input class="file-input" type="file" name="resume">
      <span class="file-cta">
        <span class="file-icon">
          <i class="fas fa-upload"></i>
        </span>
        <span class="file-label">
          Small file…
        </span>
      </span>
    </label>
  </div>
</div>

<div class="field">
  <div class="file is-boxed">
    <label class="file-label">
      <input class="file-input" type="file" name="resume">
      <span class="file-cta">
        <span class="file-icon">
          <i class="fas fa-upload"></i>
        </span>
        <span class="file-label">
          Normal file…
        </span>
      </span>
    </label>
  </div>
</div>

<div class="field">
  <div class="file is-medium is-boxed">
    <label class="file-label">
      <input class="file-input" type="file" name="resume">
      <span class="file-cta">
        <span class="file-icon">
          <i class="fas fa-upload"></i>
        </span>
        <span class="file-label">
          Medium file…
        </span>
      </span>
    </label>
  </div>
</div>

<div class="field">
  <div class="file is-large is-boxed">
    <label class="file-label">
      <input class="file-input" type="file" name="resume">
      <span class="file-cta">
        <span class="file-icon">
          <i class="fas fa-upload"></i>
        </span>
        <span class="file-label">
          Large file…
        </span>
      </span>
    </label>
  </div>
</div>
<div class="field">
  <div class="file is-small is-boxed has-name">
    <label class="file-label">
      <input class="file-input" type="file" name="resume">
      <span class="file-cta">
        <span class="file-icon">
          <i class="fas fa-upload"></i>
        </span>
        <span class="file-label">
          Small file…
        </span>
      </span>
      <span class="file-name">
        Screen Shot 2017-07-29 at 15.54.25.png
      </span>
    </label>
  </div>
</div>

<div class="field">
  <div class="file is-boxed has-name">
    <label class="file-label">
      <input class="file-input" type="file" name="resume">
      <span class="file-cta">
        <span class="file-icon">
          <i class="fas fa-upload"></i>
        </span>
        <span class="file-label">
          Normal file…
        </span>
      </span>
      <span class="file-name">
        Screen Shot 2017-07-29 at 15.54.25.png
      </span>
    </label>
  </div>
</div>

<div class="field">
  <div class="file is-medium is-boxed has-name">
    <label class="file-label">
      <input class="file-input" type="file" name="resume">
      <span class="file-cta">
        <span class="file-icon">
          <i class="fas fa-upload"></i>
        </span>
        <span class="file-label">
          Medium file…
        </span>
      </span>
      <span class="file-name">
        Screen Shot 2017-07-29 at 15.54.25.png
      </span>
    </label>
  </div>
</div>

<div class="field">
  <div class="file is-large is-boxed has-name">
    <label class="file-label">
      <input class="file-input" type="file" name="resume">
      <span class="file-cta">
        <span class="file-icon">
          <i class="fas fa-upload"></i>
        </span>
        <span class="file-label">
          Large file…
        </span>
      </span>
      <span class="file-name">
        Screen Shot 2017-07-29 at 15.54.25.png
      </span>
    </label>
  </div>
</div>

Alignment #

You can align the file input:

  • to the center with the is-centered modifier
  • to the right with the is-right modifier
<div class="field">
  <div class="file is-centered is-boxed is-success has-name">
    <label class="file-label">
      <input class="file-input" type="file" name="resume">
      <span class="file-cta">
        <span class="file-icon">
          <i class="fas fa-upload"></i>
        </span>
        <span class="file-label">
          Centered file…
        </span>
      </span>
      <span class="file-name">
        Screen Shot 2017-07-29 at 15.54.25.png
      </span>
    </label>
  </div>
</div>
<div class="field">
  <div class="file is-right is-info">
    <label class="file-label">
      <input class="file-input" type="file" name="resume">
      <span class="file-cta">
        <span class="file-icon">
          <i class="fas fa-upload"></i>
        </span>
        <span class="file-label">
          Right file…
        </span>
      </span>
      <span class="file-name">
        Screen Shot 2017-07-29 at 15.54.25.png
      </span>
    </label>
  </div>
</div>

JavaScript #

A file upload input requires JavaScript to retrieve the selected file name. Here is an example of how this could be done:

<div id="file-js-example" class="file has-name">
  <label class="file-label">
    <input class="file-input" type="file" name="resume">
    <span class="file-cta">
      <span class="file-icon">
        <i class="fas fa-upload"></i>
      </span>
      <span class="file-label">
        Choose a file…
      </span>
    </span>
    <span class="file-name">
      No file uploaded
    </span>
  </label>
</div>

<script>
  const fileInput = document.querySelector('#file-js-example input[type=file]');
  fileInput.onchange = () => {
    if (fileInput.files.length > 0) {
      const fileName = document.querySelector('#file-js-example .file-name');
      fileName.textContent = fileInput.files[0].name;
    }
  }
</script>

Variables #

You can use these variables to customize this element. Simply set one or multiple of these variables before importing Bulma. Learn how.

名字 类型 默认值 计算值
名字 类型 默认值 计算值
$file-border-color color $border hsl(0, 0%, 86%)
$file-radius size $radius 4px
$file-cta-background-color color $white-ter hsl(0, 0%, 96%)
$file-cta-color color $grey-dark hsl(0, 0%, 29%)
$file-cta-hover-color color $grey-darker hsl(0, 0%, 21%)
$file-cta-active-color color $grey-darker hsl(0, 0%, 21%)
$file-name-border-color color $border hsl(0, 0%, 86%)
$file-name-border-style string solid
$file-name-border-width size 1px 1px 1px 0
$file-name-max-width size 16em