Skip to content
Browse files

Docs: Add JavaScript filename example

Embedding it directly into the docs is better than an external jsfiddle,
especially since the code snippet is so simple.
  • Loading branch information...
dbrgn authored and jgthms committed Sep 8, 2019
1 parent a956873 commit cfcd7d124a232bdc1c898f6ad205da8157d24190
Showing with 31 additions and 2 deletions.
  1. +31 −2 docs/documentation/form/file.html
@@ -459,6 +459,35 @@
{% 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 class="file-label">
Choose a file…
<span class="file-name">
No file uploaded

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;
{% endcapture %}

{% capture file_sizes_boxed_name %}
<div class="field">
<div class="file is-small is-boxed has-name">
@@ -725,9 +754,9 @@
<div class="content">
A file upload input requires JavaScript to <strong>retrieve</strong> the <strong>selected file name</strong>.
User <a href=""><strong>@chintanbanugaria</strong></a> on GitHub <a href="">has provided</a> a simple solution <a href="">on JSFiddle</a>.
Here is an example of how this could be done:
{% include elements/snippet.html content=file_javascript %}

{% include elements/variables.html

0 comments on commit cfcd7d1

Please sign in to comment.
You can’t perform that action at this time.