November 13, 2017

Bulma File Upload

❮❮ Previous
Next ❯❯

Bulma File Upload– Bulma Css provides classes to create beautiful file upload input field. It does not uses JavaScript. Here in this article, we are going to explain how you can create file upload input field in Bulma.

Bulma File Upload Example

To create basic input file upload you need to wrap input file field by div container with class file. Add label using class label. Add icon to show upload button. Here is an example-

Bulma File Upload Example:

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

Try it »

If you run the above example it will produce output something like this-

Bulma File Upload

Modifiers

We can use modifiers with Bulma file upload, Like if want to show placeholder for input file.

Show Placeholder

Using .has-name modifier with .file-name you can show the placeholder for selected file.

| Example:

<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">
   myfile.png
 </span>
  </label>
</div>

Try it »

Bulma File Upload

Full Width File Upload

Add modifier is-fullwidth to make fullwidth file upload.

 <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">
   myfile.png
 </span>
  </label>
</div>

Box Styled

You can add box style by adding is-boxed modifier.

Bulma Box Style Example:

<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">
   myfile.png
 </span>
  </label>

Try it »

If you run the above example it will produce output something like this-

Bulma File Input Box Style

Colors

You can use color modifiers to change the color of input file upload.

Bulma Change File input color Example:

<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">
        my__new image.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">
        my__new image.png
      </span>
    </label>
  </div>
</div>

Try it »

Bulma File Input Color

Sizes

You can use size modifiers to change the size of input file field. Following sizes are available-

  • .is-small
  • .is-medium
  • .is-large

Example

<div class="field">
  <div class="file is-small">
    <label class="file-label">
      <input class="file-input" type="file" name="myfile">
      <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>

On the same way you can use other size modifiers.


Advertisements

Add Comment

📖 Read More


❮❮ Previous
Next ❯❯