2017-07-29 22:16:31 +00:00
---
title: File upload
layout: documentation
doc-tab: form
2017-07-29 22:46:27 +00:00
doc-subtab: file
2017-07-29 22:16:31 +00:00
file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
2017-07-29 22:46:27 +00:00
variables:
- name: $file-border-color
value: transparent
- name: $file-radius
value: $radius
- name: $file-cta-background-color
value: $white-ter
- name: $file-cta-color
value: $grey-dark
- name: $file-cta-hover-color
value: $grey-darker
- name: $file-cta-active-color
value: $grey-darker
- name: $file-name-border-color
value: $file-cta-background-color
- name: $file-name-border-style
value: solid
- name: $file-name-border-width
value: 1px 1px 1px 0
- name: $file-name-max-width
value: 16em
2017-07-29 22:16:31 +00:00
---
{% capture 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 = "fa fa-upload" > < / i >
< / span >
< span class = "file-label" >
Choose a file…
< / span >
< / span >
< / label >
< / div >
{% endcapture %}
2017-07-29 22:46:27 +00:00
{% capture file_name %}
< div class = "file has-name" >
2017-07-29 22:16:31 +00:00
< 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 >
2017-07-29 22:46:27 +00:00
< span class = "file-name" >
2017-07-29 22:16:31 +00:00
{{ page.file_name }}
< / span >
< / label >
< / div >
{% endcapture %}
2017-07-29 23:22:26 +00:00
{% capture file_name_right %}
< 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 = "fa fa-upload" > < / i >
< / span >
< span class = "file-label" >
Choose a file…
< / span >
< / span >
< span class = "file-name" >
{{ page.file_name }}
< / span >
< / label >
< / div >
{% endcapture %}
{% capture file_name_fullwidth %}
< 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" >
{{ page.file_name }}
< / span >
< / label >
< / div >
{% endcapture %}
2017-08-07 18:49:24 +00:00
{% capture file_boxed %}
< div class = "file is-boxed" >
2017-07-29 22:16:31 +00:00
< 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 >
{% endcapture %}
2017-08-07 18:49:24 +00:00
{% capture file_boxed_name %}
< div class = "file has-name is-boxed" >
2017-07-29 22:16:31 +00:00
< 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 >
2017-07-29 22:46:27 +00:00
< span class = "file-name" >
2017-07-29 22:16:31 +00:00
{{ page.file_name }}
< / span >
< / label >
< / div >
{% endcapture %}
2017-07-29 23:06:32 +00:00
{% capture file_colors %}
< 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" >
{{ page.file_name }}
< / span >
< / label >
< / div >
< / div >
< div class = "field" >
2017-08-07 18:49:24 +00:00
< div class = "file is-warning is-boxed" >
2017-07-29 23:06:32 +00:00
< 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" >
2017-08-07 18:49:24 +00:00
< div class = "file is-danger has-name is-boxed" >
2017-07-29 23:06:32 +00:00
< 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" >
{{ page.file_name }}
< / span >
< / label >
< / div >
< / div >
{% endcapture %}
2017-07-29 22:16:31 +00:00
{% capture file_sizes %}
< div class = "field" >
< 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 = "fa fa-upload" > < / i >
< / span >
< span class = "file-label" >
Small file…
< / span >
< / span >
< / label >
< / div >
< / div >
< div class = "field" >
< 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" >
Normal file…
< / span >
< / span >
< / label >
< / div >
< / div >
< div class = "field" >
< 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 = "fa fa-upload" > < / i >
< / span >
< span class = "file-label" >
Medium file…
< / span >
< / span >
< / label >
< / div >
< / div >
< div class = "field" >
< 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 = "fa fa-upload" > < / i >
< / span >
< span class = "file-label" >
Large file…
< / span >
< / span >
< / label >
< / div >
< / div >
{% endcapture %}
2017-07-29 22:46:27 +00:00
{% capture file_sizes_name %}
2017-07-29 22:16:31 +00:00
< div class = "field" >
2017-07-29 22:46:27 +00:00
< div class = "file is-small has-name" >
2017-07-29 22:16:31 +00:00
< 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" >
Small file…
< / span >
< / span >
2017-07-29 22:46:27 +00:00
< span class = "file-name" >
2017-07-29 22:16:31 +00:00
{{ page.file_name }}
< / span >
< / label >
< / div >
< / div >
< div class = "field" >
2017-07-29 22:46:27 +00:00
< div class = "file has-name" >
2017-07-29 22:16:31 +00:00
< 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" >
Normal file…
< / span >
< / span >
2017-07-29 22:46:27 +00:00
< span class = "file-name" >
2017-07-29 22:16:31 +00:00
{{ page.file_name }}
< / span >
< / label >
< / div >
< / div >
< div class = "field" >
2017-07-29 22:46:27 +00:00
< div class = "file is-medium has-name" >
2017-07-29 22:16:31 +00:00
< 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" >
Medium file…
< / span >
< / span >
2017-07-29 22:46:27 +00:00
< span class = "file-name" >
2017-07-29 22:16:31 +00:00
{{ page.file_name }}
< / span >
< / label >
< / div >
< / div >
< div class = "field" >
2017-07-29 22:46:27 +00:00
< div class = "file is-large has-name" >
2017-07-29 22:16:31 +00:00
< 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" >
Large file…
< / span >
< / span >
2017-07-29 22:46:27 +00:00
< span class = "file-name" >
2017-07-29 22:16:31 +00:00
{{ page.file_name }}
< / span >
< / label >
< / div >
< / div >
{% endcapture %}
2017-08-07 18:49:24 +00:00
{% capture file_sizes_boxed %}
2017-07-29 22:16:31 +00:00
< div class = "field" >
2017-08-07 18:49:24 +00:00
< div class = "file is-small is-boxed" >
2017-07-29 22:16:31 +00:00
< 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" >
Small file…
< / span >
< / span >
< / label >
< / div >
< / div >
< div class = "field" >
2017-08-07 18:49:24 +00:00
< div class = "file is-boxed" >
2017-07-29 22:16:31 +00:00
< 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" >
Normal file…
< / span >
< / span >
< / label >
< / div >
< / div >
< div class = "field" >
2017-08-07 18:49:24 +00:00
< div class = "file is-medium is-boxed" >
2017-07-29 22:16:31 +00:00
< 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" >
Medium file…
< / span >
< / span >
< / label >
< / div >
< / div >
< div class = "field" >
2017-08-07 18:49:24 +00:00
< div class = "file is-large is-boxed" >
2017-07-29 22:16:31 +00:00
< 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" >
Large file…
< / span >
< / span >
< / label >
< / div >
< / div >
{% endcapture %}
2017-08-07 18:49:24 +00:00
{% capture file_centered %}
< div class = "field" >
< 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 = "fa fa-upload" > < / i >
< / span >
< span class = "file-label" >
Centered file…
< / span >
< / span >
< span class = "file-name" >
{{ page.file_name }}
< / span >
< / label >
< / div >
< / div >
{% endcapture %}
{% capture file_right %}
< div class = "field" >
< 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 = "fa fa-upload" > < / i >
< / span >
< span class = "file-label" >
Right file…
< / span >
< / span >
< span class = "file-name" >
{{ page.file_name }}
< / span >
< / label >
< / div >
< / div >
{% endcapture %}
{% capture file_sizes_boxed_name %}
2017-07-29 22:16:31 +00:00
< div class = "field" >
2017-08-07 18:49:24 +00:00
< div class = "file is-small is-boxed has-name" >
2017-07-29 22:16:31 +00:00
< 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" >
Small file…
< / span >
< / span >
2017-07-29 22:46:27 +00:00
< span class = "file-name" >
2017-07-29 22:16:31 +00:00
{{ page.file_name }}
< / span >
< / label >
< / div >
< / div >
< div class = "field" >
2017-08-07 18:49:24 +00:00
< div class = "file is-boxed has-name" >
2017-07-29 22:16:31 +00:00
< 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" >
Normal file…
< / span >
< / span >
2017-07-29 22:46:27 +00:00
< span class = "file-name" >
2017-07-29 22:16:31 +00:00
{{ page.file_name }}
< / span >
< / label >
< / div >
< / div >
< div class = "field" >
2017-08-07 18:49:24 +00:00
< div class = "file is-medium is-boxed has-name" >
2017-07-29 22:16:31 +00:00
< 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" >
Medium file…
< / span >
< / span >
2017-07-29 22:46:27 +00:00
< span class = "file-name" >
2017-07-29 22:16:31 +00:00
{{ page.file_name }}
< / span >
< / label >
< / div >
< / div >
< div class = "field" >
2017-08-07 18:49:24 +00:00
< div class = "file is-large is-boxed has-name" >
2017-07-29 22:16:31 +00:00
< 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" >
Large file…
< / span >
< / span >
2017-07-29 22:46:27 +00:00
< span class = "file-name" >
2017-07-29 22:16:31 +00:00
{{ page.file_name }}
< / span >
< / label >
< / div >
< / div >
{% endcapture %}
{% include subnav-form.html %}
< section class = "section" >
< div class = "container" >
< h1 class = "title" > File upload< / h1 >
< h2 class = "subtitle" >
A custom < strong > file upload< / strong > input, without JavaScript
< / h2 >
{%
include meta.html
experimental=true
since="0.5.1"
2017-07-29 23:06:32 +00:00
colors=true
2017-07-29 22:16:31 +00:00
sizes=true
variables=true
%}
< hr >
< div class = "content" >
< p >
2017-07-29 22:46:27 +00:00
The < code > .file< / code > element is a simple < strong > interactive label< / strong > that wraps an < code > < input type="file"> < / code > . It comprises several sub-elements:
2017-07-29 22:16:31 +00:00
< / p >
2017-07-29 22:46:27 +00:00
< ul >
< li >
< code > .file< / code > the main < strong > container< / strong >
< ul >
< li >
< code > .file-label< / code > the actual < strong > interactive< / strong > and clickable part of the element
< ul >
< li >
< code > .file-input< / code > the < strong > native< / strong > file input, hidden for styling purposes
< / li >
< li >
< code > .file-cta< / code > the upload < strong > call-to-action< / strong >
< ul >
< li >
< code > .file-icon< / code > an optional < strong > upload< / strong > icon
< / li >
< li >
< code > .file-label< / code > the "Choose a file…" text
< / li >
< / ul >
< / li >
< li >
< code > .file-name< / code > a container for the < strong > chosen file< / strong > name
< / li >
< / ul >
< / li >
< / ul >
< / li >
< / ul >
2017-07-29 22:16:31 +00:00
< / div >
< div class = "columns" >
< div class = "column" >
< div class = "example" >
{{ file }}
< / div >
< / div >
< div class = "column highlight-full" >
{% highlight html %}{{ file }}{% endhighlight %}
< / div >
< / div >
{% include heading.html name="Modifiers" %}
< div class = "columns" >
< div class = "column" >
2017-07-29 22:46:27 +00:00
< div class = "content" >
< p >
With the < code > .has-name< / code > modifier combined with the < code > .file-name< / code > element, you can add a < strong > placeholder< / strong > for the selected file name.
< / p >
< / div >
2017-07-29 22:16:31 +00:00
< div class = "example" >
2017-07-29 22:46:27 +00:00
{{ file_name }}
2017-07-29 22:16:31 +00:00
< / div >
< / div >
< div class = "column highlight-full" >
2017-07-29 22:46:27 +00:00
{% highlight html %}{{ file_name }}{% endhighlight %}
2017-07-29 22:16:31 +00:00
< / div >
< / div >
2017-07-29 23:22:26 +00:00
< div class = "columns" >
< div class = "column" >
< div class = "content" >
< p >
You can move the CTA to the < strong > right side< / strong > with the < code > .is-right< / code > modifier.
< / p >
< / div >
< div class = "example" >
{{ file_name_right }}
< / div >
< / div >
< div class = "column highlight-full" >
{% highlight html %}{{ file_name_right }}{% endhighlight %}
< / div >
< / div >
< div class = "columns" >
< div class = "column" >
< div class = "content" >
< p >
You can also < strong > expand< / strong > the name to fill up the space with the < code > .is-fullwidth< / code > modifier.
< / p >
< / div >
< div class = "example" >
{{ file_name_fullwidth }}
< / div >
< / div >
< div class = "column highlight-full" >
{% highlight html %}{{ file_name_fullwidth }}{% endhighlight %}
< / div >
< / div >
2017-07-29 22:16:31 +00:00
< div class = "columns" >
< div class = "column" >
2017-07-29 22:46:27 +00:00
< div class = "content" >
< p >
2017-08-07 18:49:24 +00:00
You can have a < strong > boxed block< / strong > with the < code > .is-boxed< / code > modifier.
2017-07-29 22:46:27 +00:00
< / p >
< / div >
2017-07-29 22:16:31 +00:00
< div class = "example" >
2017-08-07 18:49:24 +00:00
{{ file_boxed }}
2017-07-29 22:16:31 +00:00
< / div >
< / div >
< div class = "column highlight-full" >
2017-08-07 18:49:24 +00:00
{% highlight html %}{{ file_boxed }}{% endhighlight %}
2017-07-29 22:16:31 +00:00
< / div >
< / div >
< div class = "columns" >
< div class = "column" >
2017-07-29 22:46:27 +00:00
< div class = "content" >
< p >
2017-08-07 18:49:24 +00:00
You can < strong > combine< / strong > < code > .has-name< / code > and < code > .is-boxed< / code > .
2017-07-29 22:46:27 +00:00
< / p >
< / div >
2017-07-29 22:16:31 +00:00
< div class = "example" >
2017-08-07 18:49:24 +00:00
{{ file_boxed_name }}
2017-07-29 22:16:31 +00:00
< / div >
< / div >
< div class = "column highlight-full" >
2017-08-07 18:49:24 +00:00
{% highlight html %}{{ file_boxed_name }}{% endhighlight %}
2017-07-29 22:16:31 +00:00
< / div >
< / div >
2017-07-29 23:06:32 +00:00
{% include heading.html name="Colors" %}
< div class = "columns" >
< div class = "column" >
< div class = "content" >
< p >
You can style the file element by appending one of the < strong > 9 color modifiers< / strong > :
< / p >
< ul >
{% for color in site.colors %}
< li >
< code > is-{{ color }}< / code >
< / li >
{% endfor %}
< / ul >
< / div >
< div class = "example" >
{{ file_colors }}
< / div >
< / div >
< div class = "column" >
{% highlight html %}{{ file_colors }}{% endhighlight %}
< / div >
< / div >
2017-07-29 22:16:31 +00:00
{% include heading.html name="Sizes" %}
2017-07-29 22:46:27 +00:00
< div class = "content" >
< p >
You can append one of < strong > 3 additional sizes< / strong > :
< / p >
< ul >
< li >
< code > .is-small< / code >
< / li >
< li >
< code > .is-medium< / code >
< / li >
< li >
< code > .is-large< / code >
< / li >
< / ul >
< / div >
2017-07-29 22:16:31 +00:00
< div class = "columns" >
< div class = "column" >
< div class = "example" >
{{ file_sizes }}
< / div >
< / div >
< div class = "column" >
{% highlight html %}{{ file_sizes }}{% endhighlight %}
< / div >
< / div >
< div class = "columns" >
< div class = "column" >
< div class = "example" >
2017-07-29 22:46:27 +00:00
{{ file_sizes_name }}
2017-07-29 22:16:31 +00:00
< / div >
< / div >
< div class = "column" >
2017-07-29 22:46:27 +00:00
{% highlight html %}{{ file_sizes_name }}{% endhighlight %}
2017-07-29 22:16:31 +00:00
< / div >
< / div >
< div class = "columns" >
< div class = "column" >
< div class = "example" >
2017-08-07 18:49:24 +00:00
{{ file_sizes_boxed }}
< / div >
< / div >
< div class = "column" >
{% highlight html %}{{ file_sizes_boxed }}{% endhighlight %}
< / div >
< / div >
< div class = "columns" >
< div class = "column" >
< div class = "example" >
{{ file_sizes_boxed_name }}
< / div >
< / div >
< div class = "column" >
{% highlight html %}{{ file_sizes_boxed_name }}{% endhighlight %}
< / div >
< / div >
{% include heading.html name="Alignment" %}
< div class = "content" >
< p >
You can < strong > align< / strong > the file input:
< / p >
< ul >
< li >
to the < strong > center< / strong > with the < code > is-centered< / code > modifier
< / li >
< li >
to the < strong > right< / strong > with the < code > is-right< / code > modifier
< / li >
< / ul >
< / div >
< div class = "columns" >
< div class = "column" >
< div class = "example" >
{{ file_centered }}
2017-07-29 22:16:31 +00:00
< / div >
< / div >
< div class = "column" >
2017-08-07 18:49:24 +00:00
{% highlight html %}{{ file_centered }}{% endhighlight %}
2017-07-29 22:16:31 +00:00
< / div >
< / div >
< div class = "columns" >
< div class = "column" >
< div class = "example" >
2017-08-07 18:49:24 +00:00
{{ file_right }}
2017-07-29 22:16:31 +00:00
< / div >
< / div >
< div class = "column" >
2017-08-07 18:49:24 +00:00
{% highlight html %}{{ file_right }}{% endhighlight %}
2017-07-29 22:16:31 +00:00
< / div >
< / div >
2017-07-29 22:46:27 +00:00
{% include heading.html name="JavaScript" %}
< div class = "content" >
< p >
A file upload input requires JavaScript to < strong > retrieve< / strong > the < strong > selected file name< / strong > .
< br >
User < a href = "https://github.com/chintanbanugaria" > < strong > @chintanbanugaria< / strong > < / a > on GitHub < a href = "https://github.com/jgthms/bulma/issues/280#issuecomment-294099510" > has provided< / a > a simple solution < a href = "https://jsfiddle.net/chintanbanugaria/uzva5byy/" > on JSFiddle< / a > .
< / p >
< / div >
{% include variables.html element=true %}
2017-07-29 22:16:31 +00:00
< / div >
< / section >
