bulma/docs/_includes/library/form/file.html

<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>

<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>

<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>

<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>

<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>

<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>

<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 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 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 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 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 class="file is-normal">
  <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 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 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 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 class="file is-normal 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 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 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 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 class="file is-normal 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 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 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 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 class="file is-normal 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 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 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 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 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>