--- title: File upload layout: documentation doc-tab: form doc-subtab: upload file_name: "Screen Shot 2017-07-29 at 15.54.25.png" --- {% capture file %}
{% endcapture %} {% capture file_path %}
{% endcapture %} {% capture file_centered %}
{% endcapture %} {% capture file_centered_path %}
{% endcapture %} {% capture file_sizes %}
{% endcapture %} {% capture file_sizes_path %}
{% endcapture %} {% capture file_sizes_centered %}
{% endcapture %} {% capture file_sizes_centered_path %}
{% endcapture %} {% include subnav-form.html %}

File upload

A custom file upload input, without JavaScript

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

The .file class is a simple wrapper around the <input type="radio"> HTML elements. It is intentionally not styled, to preserve cross-browser compatibility and the user experience.

Make sure the linked radio buttons have the same value for their name HTML attribute.

{{ file }}
{% highlight html %}{{ file }}{% endhighlight %}
{% include heading.html name="Modifiers" %}
{{ file_path }}
{% highlight html %}{{ file_path }}{% endhighlight %}
{{ file_centered }}
{% highlight html %}{{ file_centered }}{% endhighlight %}
{{ file_centered_path }}
{% highlight html %}{{ file_centered_path }}{% endhighlight %}
{% include heading.html name="Sizes" %}
{{ file_sizes }}
{% highlight html %}{{ file_sizes }}{% endhighlight %}
{{ file_sizes_path }}
{% highlight html %}{{ file_sizes_path }}{% endhighlight %}
{{ file_sizes_centered }}
{% highlight html %}{{ file_sizes_centered }}{% endhighlight %}
{{ file_sizes_centered_path }}
{% highlight html %}{{ file_sizes_centered_path }}{% endhighlight %}