Beautiful Upload Buttons For Bulma Framework

Preview:

Description:

A CSS extension for Bulma framework that helps you create customizable, pretty nice file upload buttons for uploaders.

How to use it:

1. Install and import the bulma-upload-control into your Bulma project.

# NPM
$ npm i bulma-upload-control --save

/* Bulma */
@import "node_modules/bulma/bulma";
/* Bulma Upload Control */
@import "node_modules/bulma-upload-control/bulma-upload-control";

2. Or directly load the compiled CSS main.min.css after Bulma’s stylesheet.

<!-- Bulma Stylesheet -->
<link rel="stylesheet" href="/path/to/cdn/bulma.min.css" />
<!-- Bulma Upload Control -->
<link rel="stylesheet" href="/path/to/css/main.min.css" />

3. Create a basic file upload button and determine the theme using the following CSS classes:

• is-primary
• is-info
• is-success
• is-danger
• is-warning

<div class="field">
  <label class="upload control">
    <a class="button is-primary">
      <span>Click to upload</span>
    </a>
    <input type="file">
  </label>
</div>

4. Disable the file upload button by using the disabled attribute:

<div class="field">
  <label class="upload control">
    <a class="button is-info" disabled>
      <span>Click to upload</span>
    </a>
    <input type="file" disabled>
  </label>
</div>

5. Customize the size of the file upload button.

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

<div class="field file">
  <label class="upload control">
    <a class="button is-medium is-primary">
      <span>Click to upload</span>
    </a>
    <input type="file">
  </label>
</div>

6. Apply a ‘is loading’ status to the file upload button.

<div class="field">
  <label class="upload control">
    <a class="button is-loading is-info">
      <span class="icon"><i class="mdi mdi-upload">ANY LOADING ICON HERE</i></span>
      <span>Click to upload</span>
    </a>
    <input type="file">
  </label>
</div>