--- title: File upload 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:

{% include elements/snippet.html content=file %} {% include elements/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 elements/anchor.html name="Colors" %}

You can style the file element by appending one of the {{ site.data.colors.derived | size }} color modifiers:

{% include elements/snippet.html content=file_colors clipped=true %} {% include elements/anchor.html name="Sizes" %}

You can append one of 3 additional sizes:

{% include elements/snippet.html content=file_sizes clipped=true %} {% include elements/snippet.html content=file_sizes_name clipped=true %} {% include elements/snippet.html content=file_sizes_boxed clipped=true %} {% include elements/snippet.html content=file_sizes_boxed_name clipped=true %} {% include elements/anchor.html name="Alignment" %}

You can align the file input:

{% include elements/snippet.html content=file_centered %} {% include elements/snippet.html content=file_right %} {% include elements/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 elements/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.

{% for key in page.variables_keys %} {% assign variable = site.data.variables.elements.form.vars[key] %} {% endfor %}
Name Default value
Name Default value
{{ variable.name }} {{ variable.value }}