1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
import * as ReactDOM from 'react-dom';
import * as rp from 'request-promise';
import { Docs } from '../client/documents/Documents';
import "./ImageUpload.scss";
import React = require('react');
import { DocServer } from '../client/DocServer';
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';
import { Utils } from '../Utils';
import MobileInterface from './MobileInterface';
import { CurrentUserUtils } from '../client/util/CurrentUserUtils';
// const onPointerDown = (e: React.TouchEvent) => {
// let imgInput = document.getElementById("input_image_file");
// if (imgInput) {
// imgInput.click();
// }
// }
const inputRef = React.createRef<HTMLInputElement>();
@observer
class Uploader extends React.Component {
@observable error: string = "";
@observable status: string = "";
onClick = async () => {
console.log("uploader click");
try {
this.status = "initializing protos";
await Docs.Prototypes.initialize();
const imgPrev = document.getElementById("img_preview");
if (imgPrev) {
const files: FileList | null = inputRef.current!.files;
if (files && files.length !== 0) {
console.log(files[0]);
const name = files[0].name;
const formData = new FormData();
formData.append("file", files[0]);
const upload = window.location.origin + "/uploadFormData";
this.status = "uploading image";
console.log("uploading image", formData);
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) => {
const path = window.location.origin + file;
const doc = Docs.Create.ImageDocument(path, { _nativeWidth: 200, _width: 200, title: name });
this.status = "getting user document";
const res = await rp.get(Utils.prepend("/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.rightSidebarCollection, 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])
//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>
);
}
}
// DocServer.init(window.location.protocol, window.location.hostname, 4321, "image upload");
(async () => {
const info = await CurrentUserUtils.loadCurrentUser();
DocServer.init(window.location.protocol, window.location.hostname, 4321, info.email + "mobile");
await Docs.Prototypes.initialize();
if (info.id !== "__guest__") {
// a guest will not have an id registered
await CurrentUserUtils.loadUserDocument(info);
}
document.getElementById('root')!.addEventListener('wheel', event => {
if (event.ctrlKey) {
event.preventDefault();
}
}, true);
ReactDOM.render((
// <Uploader />
<MobileInterface />
),
document.getElementById('root')
);
}
)();
|
