---
title: File upload
subtitle: "A custom file upload input, without JavaScript"
layout: documentation
doc-tab: form
doc-subtab: file
breadcrumb:
- home
- documentation
- form
- form-file
file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
variables_keys:
- file-border-color
- file-radius
- file-cta-background-color
- file-cta-color
- file-cta-hover-color
- file-cta-active-color
- file-name-border-color
- file-name-border-style
- file-name-border-width
- file-name-max-width
meta:
experimental: true
colors: true
sizes: true
variables: true
---
{% capture file %}
{% endcapture %}
{% capture file_name %}
{% endcapture %}
{% capture file_name_right %}
{% endcapture %}
{% capture file_name_fullwidth %}
{% endcapture %}
{% capture file_boxed %}
{% endcapture %}
{% capture file_boxed_name %}
{% endcapture %}
{% capture file_colors %}
{% endcapture %}
{% capture file_sizes %}
{% endcapture %}
{% capture file_sizes_name %}
{% endcapture %}
{% capture file_sizes_boxed %}
{% endcapture %}
{% capture file_centered %}
{% endcapture %}
{% capture file_right %}
{% endcapture %}
{% capture file_sizes_boxed_name %}
{% endcapture %}
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
{% include snippet.html content=file %}
{% include anchor.html name="Modifiers" %}
With the .has-name modifier combined with the .file-name element, you can add a placeholder for the selected file name.
{{ file_name }}
{% highlight html %}{{ file_name }}{% endhighlight %}
You can move the CTA to the right side with the .is-right modifier.
{{ file_name_right }}
{% highlight html %}{{ file_name_right }}{% endhighlight %}
You can also expand the name to fill up the space with the .is-fullwidth modifier.
{{ file_name_fullwidth }}
{% highlight html %}{{ file_name_fullwidth }}{% endhighlight %}
You can have a boxed block with the .is-boxed modifier.
{{ file_boxed }}
{% highlight html %}{{ file_boxed }}{% endhighlight %}
You can combine .has-name and .is-boxed.
{{ file_boxed_name }}
{% highlight html %}{{ file_boxed_name }}{% endhighlight %}
{% include anchor.html name="Colors" %}
You can style the file element by appending one of the {{ site.data.colors.derived | size }} color modifiers:
{% for color in site.data.colors.derived %}
-
is-{{ color.id }}
{% endfor %}
{% include snippet.html content=file_colors clipped=true %}
{% include anchor.html name="Sizes" %}
You can append one of 3 additional sizes:
-
.is-small
-
.is-medium
-
.is-large
{% include snippet.html content=file_sizes clipped=true %}
{% include snippet.html content=file_sizes_name clipped=true %}
{% include snippet.html content=file_sizes_boxed clipped=true %}
{% include snippet.html content=file_sizes_boxed_name clipped=true %}
{% include anchor.html name="Alignment" %}
You can align the file input:
-
to the center with the
is-centered modifier
-
to the right with the
is-right modifier
{% include snippet.html content=file_centered %}
{% include snippet.html content=file_right %}
{% include anchor.html name="JavaScript" %}
A file upload input requires JavaScript to retrieve the selected file name.
User @chintanbanugaria on GitHub has provided a simple solution on JSFiddle.
{% include anchor.html name="Variables" %}
You can use these variables to customize this element. Simply set one or multiple of these variables before importing Bulma. Learn how.
| Name |
Default value |
| Name |
Default value |
{% for key in page.variables_keys %}
{% assign variable = site.data.variables.elements.form.vars[key] %}
{{ variable.name }}
|
{{ variable.value }}
|
{% endfor %}