bulma/docs/documentation/form/file.html

---
title: File upload
layout: documentation
doc-tab: form
doc-subtab: upload
file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
---

{% capture 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>
{% endcapture %}

{% capture file_path %}
<div class="file has-path">
  <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-path">
      {{ page.file_name }}
    </span>
  </label>
</div>
{% endcapture %}

{% capture file_centered %}
<div class="file is-centered">
  <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>
{% endcapture %}

{% capture file_centered_path %}
<div class="file is-centered has-path">
  <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-path">
      {{ page.file_name }}
    </span>
  </label>
</div>
{% endcapture %}

{% capture file_sizes %}
<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>
{% endcapture %}

{% capture file_sizes_path %}
<div class="field">
  <div class="file is-small has-path">
    <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-path">
        {{ page.file_name }}
      </span>
    </label>
  </div>
</div>

<div class="field">
  <div class="file has-path">
    <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-path">
        {{ page.file_name }}
      </span>
    </label>
  </div>
</div>

<div class="field">
  <div class="file is-medium has-path">
    <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-path">
        {{ page.file_name }}
      </span>
    </label>
  </div>
</div>

<div class="field">
  <div class="file is-large has-path">
    <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-path">
        {{ page.file_name }}
      </span>
    </label>
  </div>
</div>
{% endcapture %}

{% capture file_sizes_centered %}
<div class="field">
  <div class="file is-small is-centered">
    <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-centered">
    <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-centered">
    <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-centered">
    <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>
{% endcapture %}

{% capture file_sizes_centered_path %}
<div class="field">
  <div class="file is-small is-centered has-path">
    <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-path">
        {{ page.file_name }}
      </span>
    </label>
  </div>
</div>

<div class="field">
  <div class="file is-centered has-path">
    <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-path">
        {{ page.file_name }}
      </span>
    </label>
  </div>
</div>

<div class="field">
  <div class="file is-medium is-centered has-path">
    <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-path">
        {{ page.file_name }}
      </span>
    </label>
  </div>
</div>

<div class="field">
  <div class="file is-large is-centered has-path">
    <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-path">
        {{ page.file_name }}
      </span>
    </label>
  </div>
</div>
{% endcapture %}

{% include subnav-form.html %}

<section class="section">
  <div class="container">
    <h1 class="title">File upload</h1>
    <h2 class="subtitle">
      A custom <strong>file upload</strong> input, without JavaScript
    </h2>
    {%
      include meta.html
      experimental=true
      since="0.5.1"
      colors=false
      sizes=true
      variables=true
    %}

    <hr>

    <div class="content">
      <p>
        The <code>.file</code> class is a simple wrapper around the <code>&lt;input type="radio"&gt;</code> HTML elements. It is intentionally not styled, to preserve cross-browser compatibility and the user experience.
      </p>
      <p>
        Make sure the linked radio buttons have the <strong>same value</strong> for their <code>name</code> HTML attribute.
      </p>
    </div>

    <div class="columns">
      <div class="column">
        <div class="example">
          {{ file }}
        </div>
      </div>
      <div class="column highlight-full">
        {% highlight html %}{{ file }}{% endhighlight %}
      </div>
    </div>

    {% include heading.html name="Modifiers" %}

    <div class="columns">
      <div class="column">
        <div class="example">
          {{ file_path }}
        </div>
      </div>
      <div class="column highlight-full">
        {% highlight html %}{{ file_path }}{% endhighlight %}
      </div>
    </div>

    <div class="columns">
      <div class="column">
        <div class="example">
          {{ file_centered }}
        </div>
      </div>
      <div class="column highlight-full">
        {% highlight html %}{{ file_centered }}{% endhighlight %}
      </div>
    </div>

    <div class="columns">
      <div class="column">
        <div class="example">
          {{ file_centered_path }}
        </div>
      </div>
      <div class="column highlight-full">
        {% highlight html %}{{ file_centered_path }}{% endhighlight %}
      </div>
    </div>

    {% include heading.html name="Sizes" %}

    <div class="columns">
      <div class="column">
        <div class="example">
          {{ file_sizes }}
        </div>
      </div>
      <div class="column">
        {% highlight html %}{{ file_sizes }}{% endhighlight %}
      </div>
    </div>

    <div class="columns">
      <div class="column">
        <div class="example">
          {{ file_sizes_path }}
        </div>
      </div>
      <div class="column">
        {% highlight html %}{{ file_sizes_path }}{% endhighlight %}
      </div>
    </div>

    <div class="columns">
      <div class="column">
        <div class="example">
          {{ file_sizes_centered }}
        </div>
      </div>
      <div class="column">
        {% highlight html %}{{ file_sizes_centered }}{% endhighlight %}
      </div>
    </div>

    <div class="columns">
      <div class="column">
        <div class="example">
          {{ file_sizes_centered_path }}
        </div>
      </div>
      <div class="column">
        {% highlight html %}{{ file_sizes_centered_path }}{% endhighlight %}
      </div>
    </div>
  </div>
</section>