--- title: File upload layout: documentation doc-tab: form doc-subtab: 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 --- {% 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 %} {% include subnav-form.html %}

File upload

A custom file upload input, without JavaScript

{% include meta.html experimental=true since="0.5.1" colors=true sizes=true variables=true %}

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.

{% 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 }}