Merge pull request #16 from webxdc/adb/add-importFiles-test

add webxdc.importFiles() test

Author: adbenitez

js/uploads.js

@@ -1,21 +1,28 @@
-function setInpPrev(event) {
+function setInpPrev(files) {
     var img = document.getElementById('inpImgPreview');
-    if (event.target.files.length == 0) {
+    if (files.length == 0) {
         img.src = "#";
     } else {
         var reader = new FileReader();
         reader.onload = function() {
             img.src = reader.result;
         };
-        reader.readAsDataURL(event.target.files[0]);
+        reader.readAsDataURL(files[0]);
     }
 }
+function importFiles() {
+    webxdc.importFiles({mimeTypes: ['image/*']}).then((files) => {
+        setInpPrev(files);
+    });
+}
 
 window.addEventListener("load", () => {
     document.getElementById("uploads-output").append(
         createHeader("Uploads/Import"),
         h("div", {class: "container"},
-          h('input', {id: "imgInp", type: "file", accept: "image/*", onchange: "setInpPrev(event)"}),
+          h("button", {onclick: "importFiles()"}, "webxdc.importFiles(...)"),
+          " or ",
+          h('input', {id: "imgInp", type: "file", accept: "image/*", onchange: "setInpPrev(event.target.files)"}),
           h("br"), h("br"),
           h("img", {id: "inpImgPreview", style: "max-height: 200px; max-width: 90%; width: auto; display:block", alt: "Image preview will appear here"}),
          ),

webxdc.js

@@ -133,7 +133,28 @@ window.webxdc = (() => {
             } else {
               alert(msg);
             }
-        }
+        },
+        importFiles: (filters) => {
+            var element = document.createElement("input");
+            element.type = "file";
+            element.accept = [...filters.extensions||[], ...filters.mimeTypes||[]].join(
+                ","
+            );
+            element.multiple = filters.multiple || false;
+            const promise = new Promise((resolve, _reject) => {
+                element.onchange = (_ev) => {
+                    console.log("element.files", element.files);
+                    const files = [...element.files];
+                    document.body.removeChild(element);
+                    resolve(files);
+                };
+            });
+            element.style.display = "none"
+            document.body.appendChild(element);
+            element.click();
+            console.log(element);
+            return promise;
+        },
     };
 })();