input: implement component for inputing file

1 files changed, 16 insertions, 0 deletions

diff --git a/input/example.ts b/input/example.ts
index 2fbd5ad..473c4a1 100644
--- a/input/example.ts
+++ b/input/example.ts
@@ -1,11 +1,26 @@
 // SPDX-FileCopyrightText: 2021 M. Shulhan <ms@kilabit.info>
 // SPDX-License-Identifier: GPL-3.0-or-later
 
+import { WuiInputFile } from "./file.js";
 import { WuiInputString, WuiInputStringOpts } from "./string.js";
 import { WuiInputNumber, WuiInputNumberOpts } from "./number.js";
 import { WuiInputSelect, WuiInputSelectOpts } from "./select.js";
 import { WuiInputCheckboxes, WuiInputCheckboxesOpts } from "./checkboxes.js";
 
+function exampleInputFile() {
+  const inputFile = new WuiInputFile();
+
+  inputFile.label = "Input file";
+  inputFile.hint = "Select file to be uploaded.";
+  inputFile.accept = "image/*";
+  inputFile.onChange = (file: File) => {
+    console.log(
+      `Uploading ${file.name} with size ${file.size}, type ${file.type}, and last modified at ${file.lastModified}.`,
+    );
+  };
+  document.body.appendChild(inputFile.element());
+}
+
 function exampleInputString() {
   const elExample = document.createElement("div");
 
@@ -236,6 +251,7 @@ function exampleInputCheckboxes() {
   elExample.appendChild(elLog);
 }
 
+exampleInputFile();
 exampleInputString();
 exampleInputNumber();
 exampleInputSelect();