Bulma File Upload

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-

<div class="file">
  
</div>

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

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.

<div class="file has-name">
  
</div>

Full Width File Upload

Add modifier is-fullwidth to make fullwidth file upload.

 <div class="file has-name is-fullwidth">
  
</div>

Box Styled

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

<div class="file has-name is-boxed">
  

</div>

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

Colors

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

<div class="field">
  <div class="file is-primary">
    
  </div>
</div>

<div class="field">
  <div class="file is-info has-name">
    
  </div>
</div>

<div class="field">
  <div class="file is-warning is-boxed">
    
  </div>
</div>

<div class="field">
  <div class="file is-danger has-name is-boxed">
    
  </div>
</div>

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">
    
  </div>
</div>

On the same way you can use other size modifiers.