From: Danilo Bargen <mail@dbrgn.ch>
Date: Sun, 8 Sep 2019 13:06:00 +0000 (+0200)
Subject: Docs: Add JavaScript filename example
X-Git-Tag: 0.8.0~39
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=cfcd7d124a232bdc1c898f6ad205da8157d24190;p=thirdparty%2Fbulma.git

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

diff --git a/docs/documentation/form/file.html b/docs/documentation/form/file.html
index 466594612..b7dafc792 100644
--- a/docs/documentation/form/file.html
+++ b/docs/documentation/form/file.html
@@ -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