Added upload button

jobtalle · Jun 7, 2023 · 63f4289 · 63f4289
1 parent 098940f
commit 63f4289
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 26 deletions.
diff --git a/index.html b/index.html
@@ -23,7 +23,10 @@ <h2>Drop a .png or .svg image here</h2>
                     <canvas id="preview-canvas" width="500" height="500"></canvas>
                 </div>
                 <div id="input-right">
-                    <div id="input-info"></div>
+                    <div>
+                        <input id="button-upload" type="file">
+                        <div id="input-info"></div>
+                    </div>
                     <div id="settings">
                         <table>
                             <tr>

diff --git a/js/main.js b/js/main.js
@@ -10,6 +10,7 @@ new SDFMaker(
     document.getElementById("setting-radius"),
     document.getElementById("setting-threshold"),
     document.getElementById("output-container"),
+    document.getElementById("button-upload"),
     document.getElementById("button-generate"),
     document.getElementById("button-save")
 );
diff --git a/js/sdfMaker.js b/js/sdfMaker.js
@@ -52,6 +52,7 @@ export class SDFMaker {
         settingRadius,
         settingThreshold,
         outputContainer,
+        buttonUpload,
         buttonGenerate,
         buttonSave) {
         inputTarget.ondrop = event => {
@@ -129,6 +130,9 @@ export class SDFMaker {
             settingThreshold.value = this.#threshold;
         };
 
+        buttonUpload.oninput = () => {
+            this.#upload(buttonUpload.files[0]);
+        };
         buttonGenerate.onclick = this.#generate.bind(this);
         buttonSave.onclick = this.#save.bind(this);
 
@@ -242,40 +246,42 @@ export class SDFMaker {
         }
     }
 
-    #onDrop(event) {
-        if (!event.dataTransfer.items)
-            return;
+    #processFile(file) {
+        let upscale = false;
 
-        const item = event.dataTransfer.items[0];
+        switch (file.type) {
+            case "image/svg+xml":
+                upscale = true;
 
-        if (item.kind === "file") {
-            const file = item.getAsFile();
-            let upscale = false;
+            case "image/png":
+                const reader = new FileReader();
 
-            switch (file.type) {
-                case "image/svg+xml":
-                    upscale = true;
+                reader.onload = () => {
+                    const image = new Image();
 
-                case "image/png":
-                    const reader = new FileReader();
+                    image.onload = () => {
+                        this.#loadImage(file.name, image, upscale);
+                    };
 
-                    reader.onload = () => {
-                        const image = new Image();
+                    image.src = reader.result;
+                };
 
-                        image.onload = () => {
-                            this.#loadImage(file.name, image, upscale);
-                        };
+                reader.readAsDataURL(file);
 
-                        image.src = reader.result;
-                    };
+                break;
+            default:
+                alert("Only .png files are supported");
+        }
+    }
 
-                    reader.readAsDataURL(file);
+    #onDrop(event) {
+        if (!event.dataTransfer.items)
+            return;
 
-                    break;
-                default:
-                    alert("Only .png files are supported");
-            }
-        }
+        const item = event.dataTransfer.items[0];
+
+        if (item.kind === "file")
+            this.#processFile(item.getAsFile());
     }
 
     #makeOutputImage(width, height, pixels) {
@@ -289,6 +295,10 @@ export class SDFMaker {
         return image;
     }
 
+    #upload(file) {
+        this.#processFile(file);
+    }
+
     #generate() {
         if (!this.#loaded)
             return;