File Upload

Upload one or more files

The file element is a simple interactive label that wraps an <input type="file">. It comprises several sub-elements:

file the main container
- file-label the actual interactive and clickable part of the element
  - file-input the native file input, hidden for styling purposes
  - file-cta the upload call-to-action
    - file-icon an optional upload icon
    - file-label the "Choose a file…" text
  - file-name a container for the chosen file name

Choose a 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="fas fa-upload"></i>
            </span>
            <span class="file-label">
                Choose a file…
            </span>
        </span>
    </label>
</div>

Modifiers

#1: With the has-name modifier combined with the file-name element, you can add a placeholder for the selected file name.

#2: You can move the CTA to the right side with the is-right modifier.

#3: You can also expand the name to fill up the space with the is-fullwidth modifier.

#4: You can have a boxed block with the is-boxed modifier.

#5: You can combine has-name and is-boxed.

Choose a file… Screen Shot 2017-07-29 at 15.54.25.png

Choose a file…

Choose a file… Screen Shot 2017-07-29 at 15.54.25.png

#1
<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>
#2
<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>
#3
<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>
#4
<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>
#5
<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>

Colors

You can style the file element by appending one of the 10 color modifiers:

is-white
is-black
is-light
is-dark
is-primary
is-link
is-info
is-success
is-warning
is-danger

Sizes

You can append one of 3 additional sizes:

is-small
is-medium
is-large

Alignment

You can align the file input:

to the center with the is-centered modifier
to the right with the is-right modifier

Click to upload

<template>
    <b-field class="file">
        <b-upload v-model="file">
            <a class="button is-primary">
                <b-icon icon="upload"></b-icon>
                <span>Click to upload</span>
            </a>
        </b-upload>
        <span class="file-name" v-if="file">
            {{ file.name }}
        </span>
    </b-field>
    
</template>

<script>
    export default {
        data() {
            return {
                file: null
            }
        }
    }
</script>

Drag and drop

Drop your files here or click to upload

<template>
    <section>
        <b-field>
            <b-upload v-model="dropFiles"
                multiple
                drag-drop>
                <section class="section">
                    <div class="content has-text-centered">
                        <p>
                            <b-icon
                                icon="upload"
                                size="is-large">
                            </b-icon>
                        </p>
                        <p>Drop your files here or click to upload</p>
                    </div>
                </section>
            </b-upload>
        </b-field>

        <div class="tags">
            <span v-for="(file, index) in dropFiles"
                :key="index"
                class="tag is-primary" >
                {{file.name}}
                <button class="delete is-small"
                    type="button"
                    @click="deleteDropFile(index)">
                </button>
            </span>
        </div>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                dropFiles: []
            }
        },
        methods: {
            deleteDropFile(index) {
                this.dropFiles.splice(index, 1)
            }
        }
    }
</script>

Expanded

Click to upload

Drop your files here or click to upload

<template>
  <section>
    <b-field class="file">
      <b-upload v-model="file" expanded>
        <a class="button is-primary is-fullwidth">
          <b-icon icon="upload"></b-icon>
          <span>{{ file.name || "Click to upload"}}</span>
        </a>
      </b-upload>
    </b-field>
    <b-field>
      <b-upload v-model="dropFiles" multiple drag-drop expanded>
        <section class="section">
          <div class="content has-text-centered">
            <p>
              <b-icon icon="upload" size="is-large"></b-icon>
            </p>
            <p>Drop your files here or click to upload</p>
          </div>
        </section>
      </b-upload>
    </b-field>

    <div class="tags">
      <span v-for="(file, index) in dropFiles" :key="index" class="tag is-primary">
        {{file.name}}
        <button class="delete is-small" type="button" @click="deleteDropFile(index)"></button>
      </span>
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return {
      file: {},
      dropFiles: []
    };
  },
  methods: {
    deleteDropFile(index) {
      this.dropFiles.splice(index, 1);
    }
  }
};
</script>

API

Name	Description	Type	Value	Default
`v-model`	Binding value	File, Array<File>	—	[]
`drag-drop`	Accepts drag & drop and change its style	Boolean	—	`false`
`type`	Type (color) of the drag area when hovered	String	`is-white`, `is-black`, `is-light`, `is-dark`, `is-primary`, `is-info`, `is-success`, `is-warning`, `is-danger`, and any other colors you've set in the `$colors` list on Sass	`is-primary`
`disabled`	Same as native `disabled`	Boolean	—	`false`
`name`	Same as native `name`	String	—	-
`required`	Same as native `required`	Boolean	—	`false`
`accept`	Same as native `accept`	String	—	-
`loading`	Add the loading state	Boolean	—	`false`
`multiple`	Same as native, also push new item to `v-model` instead of replacing	Boolean	—	`false`
`native`	Replace last chosen files every time (like native file input element)	Boolean	—	`false`
`expanded`	Upload will be expanded (full-width)	Boolean	—	`false`

Name	Description	Parameters
`input`	Triggers when the file list is changed	`value: File` or `File[]`

Name	Description	Parameters	Return
`checkHtml5Validity`	Check validation of HTML5 (add the message and type/color), also updates the `isValid` property		`isValid: Boolean`

Variables #

You can use these variables to customize, Simply set one or multiple of these variables before importing Buval. Learn how.

Name	Type	Default
`$file-border-color`	color	`$border`
`$file-radius`	size	`$radius`
`$file-cta-background-color`	color	`$white-ter`
`$file-cta-color`	color	`$grey-dark`
`$file-cta-hover-color`	color	`$grey-darker`
`$file-cta-active-color`	color	`$grey-darker`
`$file-name-border-color`	color	`border`
`$file-name-border-style`	string	`solid`
`$file-name-border-width`	size	`1px 1px 1px 0`
`$file-name-max-width`	size	`16em`