diff options
| author | Tyler Schicke <tyler_schicke@brown.edu> | 2019-05-23 01:08:18 -0400 |
|---|---|---|
| committer | Tyler Schicke <tyler_schicke@brown.edu> | 2019-05-23 01:08:18 -0400 |
| commit | 422119419afb3dda7c7b9992bdf8a910821c312f (patch) | |
| tree | d86553f387ab6d524ccbc4db6c51fa67818c51e4 /src/mobile/ImageUpload.tsx | |
| parent | d34fea1a5a74a406055f51db4ba57ff73a7530a8 (diff) | |
Made image upload hopefully work on mobile
Diffstat (limited to 'src/mobile/ImageUpload.tsx')
| -rw-r--r-- | src/mobile/ImageUpload.tsx | 11 |
1 files changed, 6 insertions, 5 deletions
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>), |