0ct0pu5/bulma
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Docs: Add JavaScript filename example

Browse source 
Embedding it directly into the docs is better than an external jsfiddle,
especially since the code snippet is so simple.
This commit is contained in:
Danilo Bargen 2019-09-08 15:06:00 +02:00 • committed by Jeremy Thomas
parent a956873909
commit cfcd7d124a
1 changed files with 31 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
docs/documentation/form/file.html
View file

@ -459,6 +459,35 @@ meta:
</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">
@ -725,9 +754,9 @@ meta:
<div class="content">
<p>
A file upload input requires JavaScript to <strong>retrieve</strong> the <strong>selected file name</strong>.
<br>
User <a href="https://github.com/chintanbanugaria"><strong>@chintanbanugaria</strong></a> on GitHub <a href="https://github.com/jgthms/bulma/issues/280#issuecomment-294099510">has provided</a> a simple solution <a href="https://jsfiddle.net/chintanbanugaria/uzva5byy/">on JSFiddle</a>.
Here is an example of how this could be done:
</p>
{% include elements/snippet.html content=file_javascript %}
</div>
{% include elements/variables.html