mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
cfcd7d124a
Embedding it directly into the docs is better than an external jsfiddle, especially since the code snippet is so simple.
768 lines
18 KiB
HTML
768 lines
18 KiB
HTML
---
|
|
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 %}
|
|
<div class="file">
|
|
<label class="file-label">
|
|
<input class="file-input" type="file" name="resume">
|
|
<span class="file-cta">
|
|
<span class="file-icon">
|
|
<i class="fas fa-upload"></i>
|
|
</span>
|
|
<span class="file-label">
|
|
Choose a file…
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
{% endcapture %}
|
|
|
|
{% capture file_name %}
|
|
<div class="file has-name">
|
|
<label class="file-label">
|
|
<input class="file-input" type="file" name="resume">
|
|
<span class="file-cta">
|
|
<span class="file-icon">
|
|
<i class="fas fa-upload"></i>
|
|
</span>
|
|
<span class="file-label">
|
|
Choose a file…
|
|
</span>
|
|
</span>
|
|
<span class="file-name">
|
|
{{ page.file_name }}
|
|
</span>
|
|
</label>
|
|
</div>
|
|
{% endcapture %}
|
|
|
|
{% capture file_name_right %}
|
|
<div class="file has-name is-right">
|
|
<label class="file-label">
|
|
<input class="file-input" type="file" name="resume">
|
|
<span class="file-cta">
|
|
<span class="file-icon">
|
|
<i class="fas fa-upload"></i>
|
|
</span>
|
|
<span class="file-label">
|
|
Choose a file…
|
|
</span>
|
|
</span>
|
|
<span class="file-name">
|
|
{{ page.file_name }}
|
|
</span>
|
|
</label>
|
|
</div>
|
|
{% endcapture %}
|
|
|
|
{% capture file_name_fullwidth %}
|
|
<div class="file has-name is-fullwidth">
|
|
<label class="file-label">
|
|
<input class="file-input" type="file" name="resume">
|
|
<span class="file-cta">
|
|
<span class="file-icon">
|
|
<i class="fas fa-upload"></i>
|
|
</span>
|
|
<span class="file-label">
|
|
Choose a file…
|
|
</span>
|
|
</span>
|
|
<span class="file-name">
|
|
{{ page.file_name }}
|
|
</span>
|
|
</label>
|
|
</div>
|
|
{% endcapture %}
|
|
|
|
{% capture file_boxed %}
|
|
<div class="file is-boxed">
|
|
<label class="file-label">
|
|
<input class="file-input" type="file" name="resume">
|
|
<span class="file-cta">
|
|
<span class="file-icon">
|
|
<i class="fas fa-upload"></i>
|
|
</span>
|
|
<span class="file-label">
|
|
Choose a file…
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
{% endcapture %}
|
|
|
|
{% capture file_boxed_name %}
|
|
<div class="file has-name is-boxed">
|
|
<label class="file-label">
|
|
<input class="file-input" type="file" name="resume">
|
|
<span class="file-cta">
|
|
<span class="file-icon">
|
|
<i class="fas fa-upload"></i>
|
|
</span>
|
|
<span class="file-label">
|
|
Choose a file…
|
|
</span>
|
|
</span>
|
|
<span class="file-name">
|
|
{{ page.file_name }}
|
|
</span>
|
|
</label>
|
|
</div>
|
|
{% endcapture %}
|
|
|
|
{% capture file_colors %}
|
|
<div class="field">
|
|
<div class="file is-primary">
|
|
<label class="file-label">
|
|
<input class="file-input" type="file" name="resume">
|
|
<span class="file-cta">
|
|
<span class="file-icon">
|
|
<i class="fas fa-upload"></i>
|
|
</span>
|
|
<span class="file-label">
|
|
Primary file…
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<div class="file is-info has-name">
|
|
<label class="file-label">
|
|
<input class="file-input" type="file" name="resume">
|
|
<span class="file-cta">
|
|
<span class="file-icon">
|
|
<i class="fas fa-upload"></i>
|
|
</span>
|
|
<span class="file-label">
|
|
Info file…
|
|
</span>
|
|
</span>
|
|
<span class="file-name">
|
|
{{ page.file_name }}
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<div class="file is-warning is-boxed">
|
|
<label class="file-label">
|
|
<input class="file-input" type="file" name="resume">
|
|
<span class="file-cta">
|
|
<span class="file-icon">
|
|
<i class="fas fa-cloud-upload-alt"></i>
|
|
</span>
|
|
<span class="file-label">
|
|
Warning file…
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<div class="file is-danger has-name is-boxed">
|
|
<label class="file-label">
|
|
<input class="file-input" type="file" name="resume">
|
|
<span class="file-cta">
|
|
<span class="file-icon">
|
|
<i class="fas fa-cloud-upload-alt"></i>
|
|
</span>
|
|
<span class="file-label">
|
|
Danger file…
|
|
</span>
|
|
</span>
|
|
<span class="file-name">
|
|
{{ page.file_name }}
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
{% endcapture %}
|
|
|
|
{% capture file_sizes %}
|
|
<div class="field">
|
|
<div class="file is-small">
|
|
<label class="file-label">
|
|
<input class="file-input" type="file" name="resume">
|
|
<span class="file-cta">
|
|
<span class="file-icon">
|
|
<i class="fas fa-upload"></i>
|
|
</span>
|
|
<span class="file-label">
|
|
Small file…
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<div class="file">
|
|
<label class="file-label">
|
|
<input class="file-input" type="file" name="resume">
|
|
<span class="file-cta">
|
|
<span class="file-icon">
|
|
<i class="fas fa-upload"></i>
|
|
</span>
|
|
<span class="file-label">
|
|
Normal file…
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<div class="file is-medium">
|
|
<label class="file-label">
|
|
<input class="file-input" type="file" name="resume">
|
|
<span class="file-cta">
|
|
<span class="file-icon">
|
|
<i class="fas fa-upload"></i>
|
|
</span>
|
|
<span class="file-label">
|
|
Medium file…
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<div class="file is-large">
|
|
<label class="file-label">
|
|
<input class="file-input" type="file" name="resume">
|
|
<span class="file-cta">
|
|
<span class="file-icon">
|
|
<i class="fas fa-upload"></i>
|
|
</span>
|
|
<span class="file-label">
|
|
Large file…
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
{% endcapture %}
|
|
|
|
{% capture file_sizes_name %}
|
|
<div class="field">
|
|
<div class="file is-small has-name">
|
|
<label class="file-label">
|
|
<input class="file-input" type="file" name="resume">
|
|
<span class="file-cta">
|
|
<span class="file-icon">
|
|
<i class="fas fa-upload"></i>
|
|
</span>
|
|
<span class="file-label">
|
|
Small file…
|
|
</span>
|
|
</span>
|
|
<span class="file-name">
|
|
{{ page.file_name }}
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<div class="file has-name">
|
|
<label class="file-label">
|
|
<input class="file-input" type="file" name="resume">
|
|
<span class="file-cta">
|
|
<span class="file-icon">
|
|
<i class="fas fa-upload"></i>
|
|
</span>
|
|
<span class="file-label">
|
|
Normal file…
|
|
</span>
|
|
</span>
|
|
<span class="file-name">
|
|
{{ page.file_name }}
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<div class="file is-medium has-name">
|
|
<label class="file-label">
|
|
<input class="file-input" type="file" name="resume">
|
|
<span class="file-cta">
|
|
<span class="file-icon">
|
|
<i class="fas fa-upload"></i>
|
|
</span>
|
|
<span class="file-label">
|
|
Medium file…
|
|
</span>
|
|
</span>
|
|
<span class="file-name">
|
|
{{ page.file_name }}
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<div class="file is-large has-name">
|
|
<label class="file-label">
|
|
<input class="file-input" type="file" name="resume">
|
|
<span class="file-cta">
|
|
<span class="file-icon">
|
|
<i class="fas fa-upload"></i>
|
|
</span>
|
|
<span class="file-label">
|
|
Large file…
|
|
</span>
|
|
</span>
|
|
<span class="file-name">
|
|
{{ page.file_name }}
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
{% endcapture %}
|
|
|
|
{% capture file_sizes_boxed %}
|
|
<div class="field">
|
|
<div class="file is-small is-boxed">
|
|
<label class="file-label">
|
|
<input class="file-input" type="file" name="resume">
|
|
<span class="file-cta">
|
|
<span class="file-icon">
|
|
<i class="fas fa-upload"></i>
|
|
</span>
|
|
<span class="file-label">
|
|
Small file…
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<div class="file is-boxed">
|
|
<label class="file-label">
|
|
<input class="file-input" type="file" name="resume">
|
|
<span class="file-cta">
|
|
<span class="file-icon">
|
|
<i class="fas fa-upload"></i>
|
|
</span>
|
|
<span class="file-label">
|
|
Normal file…
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<div class="file is-medium is-boxed">
|
|
<label class="file-label">
|
|
<input class="file-input" type="file" name="resume">
|
|
<span class="file-cta">
|
|
<span class="file-icon">
|
|
<i class="fas fa-upload"></i>
|
|
</span>
|
|
<span class="file-label">
|
|
Medium file…
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<div class="file is-large is-boxed">
|
|
<label class="file-label">
|
|
<input class="file-input" type="file" name="resume">
|
|
<span class="file-cta">
|
|
<span class="file-icon">
|
|
<i class="fas fa-upload"></i>
|
|
</span>
|
|
<span class="file-label">
|
|
Large file…
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
{% endcapture %}
|
|
|
|
{% capture file_centered %}
|
|
<div class="field">
|
|
<div class="file is-centered is-boxed is-success has-name">
|
|
<label class="file-label">
|
|
<input class="file-input" type="file" name="resume">
|
|
<span class="file-cta">
|
|
<span class="file-icon">
|
|
<i class="fas fa-upload"></i>
|
|
</span>
|
|
<span class="file-label">
|
|
Centered file…
|
|
</span>
|
|
</span>
|
|
<span class="file-name">
|
|
{{ page.file_name }}
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
{% endcapture %}
|
|
|
|
{% capture file_right %}
|
|
<div class="field">
|
|
<div class="file is-right is-info">
|
|
<label class="file-label">
|
|
<input class="file-input" type="file" name="resume">
|
|
<span class="file-cta">
|
|
<span class="file-icon">
|
|
<i class="fas fa-upload"></i>
|
|
</span>
|
|
<span class="file-label">
|
|
Right file…
|
|
</span>
|
|
</span>
|
|
<span class="file-name">
|
|
{{ page.file_name }}
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
{% endcapture %}
|
|
|
|
{% capture file_javascript %}
|
|
<div id="file-js-example" class="file has-name">
|
|
<label class="file-label">
|
|
<input class="file-input" type="file" name="resume">
|
|
<span class="file-cta">
|
|
<span class="file-icon">
|
|
<i class="fas fa-upload"></i>
|
|
</span>
|
|
<span class="file-label">
|
|
Choose a file…
|
|
</span>
|
|
</span>
|
|
<span class="file-name">
|
|
No file uploaded
|
|
</span>
|
|
</label>
|
|
</div>
|
|
|
|
<script>
|
|
const fileInput = document.querySelector('#file-js-example input[type=file]');
|
|
fileInput.onchange = () => {
|
|
if (fileInput.files.length > 0) {
|
|
const fileName = document.querySelector('#file-js-example .file-name');
|
|
fileName.textContent = fileInput.files[0].name;
|
|
}
|
|
}
|
|
</script>
|
|
{% endcapture %}
|
|
|
|
{% capture file_sizes_boxed_name %}
|
|
<div class="field">
|
|
<div class="file is-small is-boxed has-name">
|
|
<label class="file-label">
|
|
<input class="file-input" type="file" name="resume">
|
|
<span class="file-cta">
|
|
<span class="file-icon">
|
|
<i class="fas fa-upload"></i>
|
|
</span>
|
|
<span class="file-label">
|
|
Small file…
|
|
</span>
|
|
</span>
|
|
<span class="file-name">
|
|
{{ page.file_name }}
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<div class="file is-boxed has-name">
|
|
<label class="file-label">
|
|
<input class="file-input" type="file" name="resume">
|
|
<span class="file-cta">
|
|
<span class="file-icon">
|
|
<i class="fas fa-upload"></i>
|
|
</span>
|
|
<span class="file-label">
|
|
Normal file…
|
|
</span>
|
|
</span>
|
|
<span class="file-name">
|
|
{{ page.file_name }}
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<div class="file is-medium is-boxed has-name">
|
|
<label class="file-label">
|
|
<input class="file-input" type="file" name="resume">
|
|
<span class="file-cta">
|
|
<span class="file-icon">
|
|
<i class="fas fa-upload"></i>
|
|
</span>
|
|
<span class="file-label">
|
|
Medium file…
|
|
</span>
|
|
</span>
|
|
<span class="file-name">
|
|
{{ page.file_name }}
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<div class="file is-large is-boxed has-name">
|
|
<label class="file-label">
|
|
<input class="file-input" type="file" name="resume">
|
|
<span class="file-cta">
|
|
<span class="file-icon">
|
|
<i class="fas fa-upload"></i>
|
|
</span>
|
|
<span class="file-label">
|
|
Large file…
|
|
</span>
|
|
</span>
|
|
<span class="file-name">
|
|
{{ page.file_name }}
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
{% endcapture %}
|
|
|
|
<div class="content">
|
|
<p>
|
|
The <code>.file</code> element is a simple <strong>interactive label</strong> that wraps an <code><input type="file"></code>. It comprises several sub-elements:
|
|
</p>
|
|
<ul>
|
|
<li>
|
|
<code>.file</code> the main <strong>container</strong>
|
|
<ul>
|
|
<li>
|
|
<code>.file-label</code> the actual <strong>interactive</strong> and clickable part of the element
|
|
<ul>
|
|
<li>
|
|
<code>.file-input</code> the <strong>native</strong> file input, hidden for styling purposes
|
|
</li>
|
|
<li>
|
|
<code>.file-cta</code> the upload <strong>call-to-action</strong>
|
|
<ul>
|
|
<li>
|
|
<code>.file-icon</code> an optional <strong>upload</strong> icon
|
|
</li>
|
|
<li>
|
|
<code>.file-label</code> the "Choose a file…" text
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<code>.file-name</code> a container for the <strong>chosen file</strong> name
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{% include elements/snippet.html content=file %}
|
|
|
|
{% include elements/anchor.html name="Modifiers" %}
|
|
|
|
<div class="columns">
|
|
<div class="column">
|
|
<div class="content">
|
|
<p>
|
|
With the <code>.has-name</code> modifier combined with the <code>.file-name</code> element, you can add a <strong>placeholder</strong> for the selected file name.
|
|
</p>
|
|
</div>
|
|
<div class="bd-example">
|
|
{{ file_name }}
|
|
</div>
|
|
</div>
|
|
<div class="column highlight-full">
|
|
{% highlight html %}{{ file_name }}{% endhighlight %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="columns">
|
|
<div class="column">
|
|
<div class="content">
|
|
<p>
|
|
You can move the CTA to the <strong>right side</strong> with the <code>.is-right</code> modifier.
|
|
</p>
|
|
</div>
|
|
<div class="bd-example">
|
|
{{ file_name_right }}
|
|
</div>
|
|
</div>
|
|
<div class="column highlight-full">
|
|
{% highlight html %}{{ file_name_right }}{% endhighlight %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="columns">
|
|
<div class="column">
|
|
<div class="content">
|
|
<p>
|
|
You can also <strong>expand</strong> the name to fill up the space with the <code>.is-fullwidth</code> modifier.
|
|
</p>
|
|
</div>
|
|
<div class="bd-example">
|
|
{{ file_name_fullwidth }}
|
|
</div>
|
|
</div>
|
|
<div class="column highlight-full">
|
|
{% highlight html %}{{ file_name_fullwidth }}{% endhighlight %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="columns">
|
|
<div class="column">
|
|
<div class="content">
|
|
<p>
|
|
You can have a <strong>boxed block</strong> with the <code>.is-boxed</code> modifier.
|
|
</p>
|
|
</div>
|
|
<div class="bd-example">
|
|
{{ file_boxed }}
|
|
</div>
|
|
</div>
|
|
<div class="column highlight-full">
|
|
{% highlight html %}{{ file_boxed }}{% endhighlight %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="columns">
|
|
<div class="column">
|
|
<div class="content">
|
|
<p>
|
|
You can <strong>combine</strong> <code>.has-name</code> and <code>.is-boxed</code>.
|
|
</p>
|
|
</div>
|
|
<div class="bd-example">
|
|
{{ file_boxed_name }}
|
|
</div>
|
|
</div>
|
|
<div class="column highlight-full">
|
|
{% highlight html %}{{ file_boxed_name }}{% endhighlight %}
|
|
</div>
|
|
</div>
|
|
|
|
{% include elements/anchor.html name="Colors" %}
|
|
|
|
<div class="content">
|
|
<p>
|
|
You can style the file element by appending one of the <strong>{{ site.data.colors.derived | size }} color modifiers</strong>:
|
|
</p>
|
|
<ul>
|
|
{% for color in site.data.colors.derived %}
|
|
<li>
|
|
<code>is-{{ color.id }}</code>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
|
|
{% include elements/snippet.html content=file_colors clipped=true %}
|
|
|
|
{% include elements/anchor.html name="Sizes" %}
|
|
|
|
<div class="content">
|
|
<p>
|
|
You can append one of <strong>3 additional sizes</strong>:
|
|
</p>
|
|
<ul>
|
|
<li>
|
|
<code>.is-small</code>
|
|
</li>
|
|
<li>
|
|
<code>.is-medium</code>
|
|
</li>
|
|
<li>
|
|
<code>.is-large</code>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{% 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" %}
|
|
|
|
<div class="content">
|
|
<p>
|
|
You can <strong>align</strong> the file input:
|
|
</p>
|
|
<ul>
|
|
<li>
|
|
to the <strong>center</strong> with the <code>is-centered</code> modifier
|
|
</li>
|
|
<li>
|
|
to the <strong>right</strong> with the <code>is-right</code> modifier
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{% include elements/snippet.html content=file_centered %}
|
|
|
|
{% include elements/snippet.html content=file_right %}
|
|
|
|
{% include elements/anchor.html name="JavaScript" %}
|
|
|
|
<div class="content">
|
|
<p>
|
|
A file upload input requires JavaScript to <strong>retrieve</strong> the <strong>selected file name</strong>.
|
|
Here is an example of how this could be done:
|
|
</p>
|
|
{% include elements/snippet.html content=file_javascript %}
|
|
</div>
|
|
|
|
{% include elements/variables.html
|
|
type='element'
|
|
variables_keys=page.variables_keys
|
|
folder='elements'
|
|
file='form'
|
|
%}
|