feat(demo): add a demo

Johann-S · Sep 18, 2018 · 22f925b · 22f925b
1 parent a1254e6
commit 22f925b
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -12,6 +12,8 @@ A little plugin which makes Bootstrap 4 custom file input dynamic with no depend
 
 You can use it on [React](https://stackblitz.com/edit/bs-custom-file-input-react) and [Angular](https://stackblitz.com/edit/bs-custom-file-input-angular) too because this plugin is written with the most used JavaScript framework: [VanillaJS](http://vanilla-js.com/).
 
+[Démo](https://rawgit.com/Johann-S/bs-custom-file-input/master/demo/index.html)
+
 Features:
 
 - Works with Bootstrap 4

diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,88 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
+
+    <title>BS Custom File Input test</title>
+  </head>
+  <body>
+    <div class="container mt-1">
+      <div class="row">
+        <h1>BS Custom File Input tests</h1>
+
+        <div class="col-sm-12 mt-2">
+          <button class="btn btn-primary" onClick="bsCustomFileInput.destroy()">
+            Destroy all
+          </button>
+        </div>
+
+        <div class="col-sm-12 mt-5">
+          <h3>Examples</h3>
+          <div class="input-group mt-3">
+            <div class="custom-file">
+              <input id="inputGroupFile01" type="file" class="custom-file-input">
+              <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
+            </div>
+          </div>
+
+          <div class="input-group mt-3">
+            <div class="custom-file">
+              <input id="inputGroupFile02" type="file" multiple class="custom-file-input">
+              <label class="custom-file-label" for="inputGroupFile02">Choose several files</label>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-sm-12 mt-5">
+          <h3>Example with form</h3>
+          <form class="mt-3">
+            <div class="form-group row">
+              <div class="col-sm-10">
+                <button id="btnResetForm" class="btn btn-primary">
+                  Reset form
+                </button>
+              </div>
+            </div>
+            <div class="form-group row">
+              <div class="col-sm-10">
+                <div class="input-group mt-3">
+                  <div class="custom-file">
+                    <input id="inputGroupFile03" type="file" class="custom-file-input">
+                    <label class="custom-file-label" for="inputGroupFile03">Choose file</label>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </form>
+        </div>
+
+        <div class="col-sm-12 mt-5">
+          <h3>Example with label containing a child</h3>
+          <div class="custom-file mt-2">
+            <input id="inputGroupFile04" type="file" multiple class="custom-file-input" multiple>
+            <label class="custom-file-label" for="inputGroupFile04">
+              <span class="d-inline-block text-truncate w-75">Choose several files</span>
+            </label>
+          </div>
+      </div>
+    </div>
+
+    <script src="https://unpkg.com/bs-custom-file-input/dist/bs-custom-file-input.min.js"></script>
+    <script>
+      document.addEventListener('DOMContentLoaded', function() {
+        bsCustomFileInput.init()
+
+        var btn = document.getElementById('btnResetForm')
+        var form = document.querySelector('form')
+        btn.addEventListener('click', function () {
+          form.reset()
+        })
+      });
+    </script>
+  </body>
+</html>