--- title: File upload layout: documentation doc-tab: form doc-subtab: file file_name: "Screen Shot 2017-07-29 at 15.54.25.png" 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 --- {% 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
{{ file }}
{% highlight html %}{{ file }}{% endhighlight %}
{% include heading.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 heading.html name="Colors" %}

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

    {% for color in site.colors %}
  • is-{{ color }}
    • {% endfor %}
{{ file_colors }}
{% highlight html %}{{ file_colors }}{% endhighlight %}
{% include heading.html name="Sizes" %}

You can append one of 3 additional sizes:

  • .is-small
  • .is-medium
  • .is-large
{{ file_sizes }}
{% highlight html %}{{ file_sizes }}{% endhighlight %}
{{ file_sizes_name }}
{% highlight html %}{{ file_sizes_name }}{% endhighlight %}
{{ file_sizes_boxed }}
{% highlight html %}{{ file_sizes_boxed }}{% endhighlight %}
{{ file_sizes_boxed_name }}
{% highlight html %}{{ file_sizes_boxed_name }}{% endhighlight %}
{% include heading.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
{{ file_centered }}
{% highlight html %}{{ file_centered }}{% endhighlight %}
{{ file_right }}
{% highlight html %}{{ file_right }}{% endhighlight %}
{% include heading.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 variables.html element=true %}