diff options
| -rw-r--r-- | src/mobile/ImageUpload.scss | 14 | ||||
| -rw-r--r-- | src/mobile/ImageUpload.tsx | 11 |
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>), |