Made image upload hopefully work on mobile

2 files changed, 15 insertions, 10 deletions

diff --git a/src/mobile/ImageUpload.scss b/src/mobile/ImageUpload.scss
index 65305dd04..eea69b81c 100644
--- a/src/mobile/ImageUpload.scss
+++ b/src/mobile/ImageUpload.scss
@@ -17,14 +17,18 @@
         font-size: 3em;
     }
 
-    .upload_label {
-        width: 80vw;
-        height: 40vh;
+    .input_file {
+        display: none;
+    }
+
+    .upload_label,
+    .upload_button {
         background: $dark-color;
-        font-size: 10vw;
+        font-size: 500%;
         font-family: $sans-serif;
         text-align: center;
-        padding-top: 20vh;
+        padding: 5vh;
+        margin-bottom: 20px;
         color: white;
     }
 }
\ No newline at end of file
diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx
index 84bbfeb14..7776cf5d4 100644
--- a/src/mobile/ImageUpload.tsx
+++ b/src/mobile/ImageUpload.tsx
@@ -19,13 +19,13 @@ import { List } from '../new_fields/List';
 //         imgInput.click();
 //     }
 // }
+const inputRef = React.createRef<HTMLInputElement>();
 
-const onFileLoad = async (file: React.ChangeEvent<HTMLInputElement>) => {
-    file.persist();
+const onClick = async () => {
     await Docs.initProtos();
     let imgPrev = document.getElementById("img_preview");
     if (imgPrev) {
-        let files: FileList | null = file.target.files;
+        let files: FileList | null = inputRef.current!.files;
         if (files && files.length !== 0) {
             console.log(files[0]);
             const name = files[0].name;
@@ -71,8 +71,9 @@ const onFileLoad = async (file: React.ChangeEvent<HTMLInputElement>) => {
 ReactDOM.render((
     <div className="imgupload_cont">
         {/* <button className = "button_file"  = {onPointerDown}> Open Image </button> */}
-        <label htmlFor="input_image_file" className="upload_label">Upload an Image</label>
-        <input type="file" accept="image/*" onChange={onFileLoad} className="input_file" id="input_image_file"></input>
+        <label htmlFor="input_image_file" className="upload_label">Choose an Image</label>
+        <input type="file" accept="image/*" className="input_file" id="input_image_file" ref={inputRef}></input>
+        <button onClick={onClick} className="upload_button">Upload</button>
         <img id="img_preview" src=""></img>
         <div id="message" />
     </div>),