diff options
Diffstat (limited to 'src/mobile')
| -rw-r--r-- | src/mobile/ImageUpload.scss | 7 | ||||
| -rw-r--r-- | src/mobile/ImageUpload.tsx | 55 |
2 files changed, 44 insertions, 18 deletions
diff --git a/src/mobile/ImageUpload.scss b/src/mobile/ImageUpload.scss index 2d8966be1..d0b7d4e41 100644 --- a/src/mobile/ImageUpload.scss +++ b/src/mobile/ImageUpload.scss @@ -1,6 +1,6 @@ .imgupload_cont { - height: 100%; - width: 100%; + height: 100vh; + width: 100vw; align-content: center; .button_file { text-align: center; @@ -10,7 +10,4 @@ color: grey; font-size: 3em; } - .input_file { - background-color: transparent; // display: none; - } }
\ No newline at end of file diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx index 8ad781990..935f5b5c1 100644 --- a/src/mobile/ImageUpload.tsx +++ b/src/mobile/ImageUpload.tsx @@ -2,29 +2,58 @@ import * as ReactDOM from 'react-dom'; import React = require('react'); import "./ImageUpload.scss" import { action, runInAction } from "mobx"; +import { type } from 'os'; +import { Documents } from '../client/documents/Documents'; +import { Document } from '../fields/Document'; +import { Server } from '../client/Server'; +import { Opt, Field } from '../fields/Field'; +import { ListField } from '../fields/ListField'; +import { KeyStore } from '../fields/KeyStore'; -const onPointerDown = (e: React.TouchEvent) => { - let imgInput = document.getElementById("input_image_file"); - if (imgInput) { - imgInput.click(); - } -} +// const onPointerDown = (e: React.TouchEvent) => { +// let imgInput = document.getElementById("input_image_file"); +// if (imgInput) { +// imgInput.click(); +// } +// } +const pendingDocId = "pending-doc" const onFileLoad = (file: any) => { - let img = new Image(); let imgPrev = document.getElementById("img_preview") if (imgPrev) { - let files = file.target.files; + let files: File[] = file.target.files; if (files.length != 0) { console.log(files[0]); - console.log(window.location.origin) - const upload = window.location.origin + "/upload"; let formData = new FormData(); formData.append("file", files[0]); - console.log(window.location.origin + file[0]) + + const upload = window.location.origin + "/upload" + fetch(upload, { + method: 'POST', + body: formData + }).then((res: Response) => { + return res.json() + }).then(json => { + json.map((file: any) => { + let path = window.location.origin + file + runInAction(() => { + var doc: Document = Documents.ImageDocument(path, { nativeWidth: 200, width: 200 }) + Server.GetField(pendingDocId, (res: Opt<Field>) => { + if (res) { + if (res instanceof Document) { + res.GetOrCreateAsync(KeyStore.Data, ListField, (f: ListField<Document>) => { + f.Data.push(doc) + }) + } + } + }) + }) + }) + }) + // console.log(window.location.origin + file[0]) //imgPrev.setAttribute("src", window.location.origin + files[0].name) } @@ -35,8 +64,8 @@ const onFileLoad = (file: any) => { ReactDOM.render(( <div className="imgupload_cont"> - {/* <button className="button_file" onTouchStart={onPointerDown}> Open Image </button> */} - <input type="file" accept="image/*" onChange={onFileLoad} className="input_file" id="input_image_file"></input> + {/* <button className = "button_file" = {onPointerDown}> Open Image </button> */} + <input type="file" accept="image/*" capture="camera" onChange={onFileLoad} className="input_file" id="input_image_file"></input> <img id="img_preview" src=""></img> </div>), document.getElementById('root') |