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

Choose a file…

{% endcapture %} {% capture file_name %}

Choose a file… {{ page.file_name }}

{% endcapture %} {% capture file_name_right %}

Choose a file… {{ page.file_name }}

{% endcapture %} {% capture file_name_fullwidth %}

Choose a file… {{ page.file_name }}

{% endcapture %} {% capture file_boxed %}

Choose a file…

{% endcapture %} {% capture file_boxed_name %}

Choose a file… {{ page.file_name }}

{% endcapture %} {% capture file_colors_a %}

Primary file…

{% endcapture %} {% capture file_colors_b %}

Info file… {{ page.file_name }}

{% endcapture %} {% capture file_colors_c %}

Warning file…

{% endcapture %} {% capture file_colors_d %}

Danger file… {{ page.file_name }}

{% endcapture %} {% capture file_centered %}

Centered file… {{ page.file_name }}

{% endcapture %} {% capture file_right %}

Right file… {{ page.file_name }}

{% endcapture %} {% capture file_javascript %}

Choose a file… No file uploaded

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

{% highlight html %}{{ file_name }}{% endhighlight %}

You can move the CTA to the right side with the is-right modifier.

{% highlight html %}{{ file_name_right }}{% endhighlight %}

You can also expand the name to fill up the space with the is-fullwidth modifier.

{% highlight html %}{{ file_name_fullwidth }}{% endhighlight %}

You can have a boxed block with the is-boxed modifier.

{% highlight html %}{{ file_boxed }}{% endhighlight %}

You can combine has-name and is-boxed.

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

is-{{ color.id }}

{% include elements/snippet.html content=file_colors_a %} {% include elements/snippet.html content=file_colors_b %} {% include elements/snippet.html content=file_colors_c %} {% include elements/snippet.html content=file_colors_d %} {% include elements/anchor.html name="Sizes" %}

You can append one of the 4 available sizes:

is-small
is-normal (default)
is-medium
is-large

{% for size in site.data.sizes %} {% capture foobar %}

{{ size | capitalize }} file…

{% endcapture %} {% include elements/snippet.html content=foobar %} {% endfor %} {% for size in site.data.sizes %} {% capture foobar %}

{{ size | capitalize }} file… {{ page.file_name }}

{% endcapture %} {% include elements/snippet.html content=foobar %} {% endfor %} {% for size in site.data.sizes %} {% capture foobar %}

{{ size | capitalize }} file…

{% endcapture %} {% include elements/snippet.html content=foobar %} {% endfor %} {% for size in site.data.sizes %} {% capture foobar %}

{{ size | capitalize }} file… {{ page.file_name }}

{% endcapture %} {% include elements/snippet.html content=foobar %} {% endfor %} {% include elements/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 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 horizontal=true content=file_javascript %} {% include components/variables.html type='element' variables_keys=page.variables_keys folder='elements' file='form' %}