diff options
Diffstat (limited to 'src/mobile/ImageUpload.tsx')
| -rw-r--r-- | src/mobile/ImageUpload.tsx | 127 |
1 files changed, 79 insertions, 48 deletions
diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx index 84bbfeb14..bfc1738fc 100644 --- a/src/mobile/ImageUpload.tsx +++ b/src/mobile/ImageUpload.tsx @@ -9,6 +9,8 @@ import { Opt, Doc } from '../new_fields/Doc'; import { Cast } from '../new_fields/Types'; import { listSpec } from '../new_fields/Schema'; import { List } from '../new_fields/List'; +import { observer } from 'mobx-react'; +import { observable } from 'mobx'; @@ -19,62 +21,91 @@ import { List } from '../new_fields/List'; // imgInput.click(); // } // } +const inputRef = React.createRef<HTMLInputElement>(); -const onFileLoad = async (file: React.ChangeEvent<HTMLInputElement>) => { - file.persist(); - await Docs.initProtos(); - let imgPrev = document.getElementById("img_preview"); - if (imgPrev) { - let files: FileList | null = file.target.files; - if (files && files.length !== 0) { - console.log(files[0]); - const name = files[0].name; - let formData = new FormData(); - formData.append("file", files[0]); +@observer +class Uploader extends React.Component { + @observable + error: string = ""; + @observable + status: string = ""; - const upload = window.location.origin + "/upload"; - const res = await fetch(upload, { - method: 'POST', - body: formData - }); - const json = await res.json(); - json.map(async (file: any) => { - let path = window.location.origin + file; - var doc = Docs.ImageDocument(path, { nativeWidth: 200, width: 200, title: name }); + onClick = async () => { + try { + this.status = "initializing protos"; + await Docs.initProtos(); + let imgPrev = document.getElementById("img_preview"); + if (imgPrev) { + let files: FileList | null = inputRef.current!.files; + if (files && files.length !== 0) { + console.log(files[0]); + const name = files[0].name; + let formData = new FormData(); + formData.append("file", files[0]); - const res = await rp.get(DocServer.prepend(RouteStore.getUserDocumentId)); - if (!res) { - throw new Error("No user id returned"); - } - const field = await DocServer.GetRefField(res); - let pending: Opt<Doc>; - if (field instanceof Doc) { - pending = await Cast(field.optionalRightCollection, Doc); - } - if (pending) { - const data = await Cast(pending.data, listSpec(Doc)); - if (data) { - data.push(doc); - } else { - pending.data = new List([doc]); - } - } - }); + const upload = window.location.origin + "/upload"; + this.status = "uploading image"; + const res = await fetch(upload, { + method: 'POST', + body: formData + }); + this.status = "upload image, getting json"; + const json = await res.json(); + json.map(async (file: any) => { + let path = window.location.origin + file; + var doc = Docs.ImageDocument(path, { nativeWidth: 200, width: 200, title: name }); + + this.status = "getting user document"; + + const res = await rp.get(DocServer.prepend(RouteStore.getUserDocumentId)); + if (!res) { + throw new Error("No user id returned"); + } + const field = await DocServer.GetRefField(res); + let pending: Opt<Doc>; + if (field instanceof Doc) { + pending = await Cast(field.optionalRightCollection, Doc); + } + if (pending) { + this.status = "has pending docs"; + const data = await Cast(pending.data, listSpec(Doc)); + if (data) { + data.push(doc); + } else { + pending.data = new List([doc]); + } + this.status = "finished"; + } + }); - // console.log(window.location.origin + file[0]) + // console.log(window.location.origin + file[0]) - //imgPrev.setAttribute("src", window.location.origin + files[0].name) + //imgPrev.setAttribute("src", window.location.origin + files[0].name) + } + } + } catch (error) { + this.error = JSON.stringify(error); } } -}; + + render() { + return ( + <div className="imgupload_cont"> + <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={this.onClick} className="upload_button">Upload</button> + <img id="img_preview" src=""></img> + <p>{this.status}</p> + <p>{this.error}</p> + </div> + ); + } + +} + 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> - <img id="img_preview" src=""></img> - <div id="message" /> - </div>), + <Uploader /> +), document.getElementById('root') );
\ No newline at end of file |