--- 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_javascript %}
{% 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. Here is an example of how this could be done:

{% include elements/snippet.html content=file_javascript %}
{% include elements/variables.html type='element' variables_keys=page.variables_keys folder='elements' file='form' %}