You are viewing the deprecated 0.5.1 version of the website. Click here to view the latest version

Documentation

Everything you need to create a website with Bulma

# File upload

## A custom file upload input, without JavaScript

Experimental
Since 0.5.1
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

Choose a file…

    <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="fa 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.

Choose a file… Screen Shot 2017-07-29 at 15.54.25.png

    <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="fa 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.

Choose a file… Screen Shot 2017-07-29 at 15.54.25.png

    <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="fa 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.

Choose a file… Screen Shot 2017-07-29 at 15.54.25.png

    <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="fa 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.

Choose a file…

    <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="fa fa-upload"></i>
          </span>
          <span class="file-label">
            Choose a file…
          </span>
        </span>
      </label>
    </div>

You can combine `.has-name` and `.is-boxed`.

Choose a file… Screen Shot 2017-07-29 at 15.54.25.png

    <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="fa 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 9 color modifiers:

Primary file…
Info file… Screen Shot 2017-07-29 at 15.54.25.png
Warning file…
Danger file… Screen Shot 2017-07-29 at 15.54.25.png

    <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="fa 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="fa 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="fa fa-cloud-upload"></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="fa fa-cloud-upload"></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`

Small file…
Normal file…
Medium file…
Large file…

    <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="fa 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="fa 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="fa 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="fa fa-upload"></i>
            </span>
            <span class="file-label">
              Large file…
            </span>
          </span>
        </label>
      </div>
    </div>

Small file… Screen Shot 2017-07-29 at 15.54.25.png
Normal file… Screen Shot 2017-07-29 at 15.54.25.png
Medium file… Screen Shot 2017-07-29 at 15.54.25.png
Large file… Screen Shot 2017-07-29 at 15.54.25.png

    <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="fa 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="fa 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="fa 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="fa 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>

Small file…
Normal file…
Medium file…
Large file…

    <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="fa 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="fa 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="fa 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="fa fa-upload"></i>
            </span>
            <span class="file-label">
              Large file…
            </span>
          </span>
        </label>
      </div>
    </div>

Small file… Screen Shot 2017-07-29 at 15.54.25.png
Normal file… Screen Shot 2017-07-29 at 15.54.25.png
Medium file… Screen Shot 2017-07-29 at 15.54.25.png
Large file… Screen Shot 2017-07-29 at 15.54.25.png

    <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="fa 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="fa 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="fa 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="fa 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

Centered file… Screen Shot 2017-07-29 at 15.54.25.png

    <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="fa 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>

Right file… Screen Shot 2017-07-29 at 15.54.25.png

    <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="fa 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.
User @chintanbanugaria on GitHub has provided a simple solution on JSFiddle.

### Variables #

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

Name | Default value
--- | ---
Name | Default value
`$file-border-color` | `transparent`
`$file-radius` | `$radius`
`$file-cta-background-color` | `$white-ter`
`$file-cta-color` | `$grey-dark`
`$file-cta-hover-color` | `$grey-darker`
`$file-cta-active-color` | `$grey-darker`
`$file-name-border-color` | `$file-cta-background-color`
`$file-name-border-style` | `solid`
`$file-name-border-width` | `1px 1px 1px 0`
`$file-name-max-width` | `16em`

This page is open source. Noticed a typo? Or something unclear? Improve this page on GitHub

Bulma Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!