From 422119419afb3dda7c7b9992bdf8a910821c312f Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Thu, 23 May 2019 01:08:18 -0400
Subject: Made image upload hopefully work on mobile

---
 src/mobile/ImageUpload.scss | 14 +++++++++-----
 src/mobile/ImageUpload.tsx  | 11 ++++++-----
 2 files changed, 15 insertions(+), 10 deletions(-)

(limited to 'src/mobile')

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>),
-- 
cgit v1.2.3-70-g09d2


From adbe3e98e67e92d7f4e03e9c0beb54ad7b617fb6 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Thu, 23 May 2019 01:16:15 -0400
Subject: More image upload changes

---
 src/mobile/ImageUpload.tsx | 122 +++++++++++++++++++++++++++------------------
 1 file changed, 74 insertions(+), 48 deletions(-)

(limited to 'src/mobile')

diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx
index 7776cf5d4..91a8858d8 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';
 
 
 
@@ -21,61 +23,85 @@ import { List } from '../new_fields/List';
 // }
 const inputRef = React.createRef<HTMLInputElement>();
 
-const onClick = async () => {
-    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]);
+@observer
+class Uploader extends React.Component {
+    @observable
+    error: 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.error = "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.error = "uploading image";
+                    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 });
+
+                        this.error = "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.error = "has pending docs";
+                            const data = await Cast(pending.data, listSpec(Doc));
+                            if (data) {
+                                data.push(doc);
+                            } else {
+                                pending.data = new List([doc]);
+                            }
+                            this.error = "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.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">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>),
+    <Uploader />
+),
     document.getElementById('root')
 );
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 517816327526520b99e439345b48549ebc79db6b Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Thu, 23 May 2019 01:24:15 -0400
Subject: More image upload changes

---
 src/mobile/ImageUpload.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

(limited to 'src/mobile')

diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx
index 91a8858d8..bfc1738fc 100644
--- a/src/mobile/ImageUpload.tsx
+++ b/src/mobile/ImageUpload.tsx
@@ -27,10 +27,12 @@ const inputRef = React.createRef<HTMLInputElement>();
 class Uploader extends React.Component {
     @observable
     error: string = "";
+    @observable
+    status: string = "";
 
     onClick = async () => {
         try {
-            this.error = "initializing protos";
+            this.status = "initializing protos";
             await Docs.initProtos();
             let imgPrev = document.getElementById("img_preview");
             if (imgPrev) {
@@ -42,17 +44,18 @@ class Uploader extends React.Component {
                     formData.append("file", files[0]);
 
                     const upload = window.location.origin + "/upload";
-                    this.error = "uploading image";
+                    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.error = "getting user document";
+                        this.status = "getting user document";
 
                         const res = await rp.get(DocServer.prepend(RouteStore.getUserDocumentId));
                         if (!res) {
@@ -64,14 +67,14 @@ class Uploader extends React.Component {
                             pending = await Cast(field.optionalRightCollection, Doc);
                         }
                         if (pending) {
-                            this.error = "has pending docs";
+                            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.error = "finished";
+                            this.status = "finished";
                         }
                     });
 
@@ -92,6 +95,7 @@ class Uploader extends React.Component {
                 <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>
         );
-- 
cgit v1.2.3-70-g09d2


From b286d5a80b0c4cf56aa8ab1e6940bf711402ed59 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Thu, 23 May 2019 01:27:59 -0400
Subject: More image upload changes

---
 src/mobile/ImageUpload.tsx | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'src/mobile')

diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx
index bfc1738fc..6ca3a6f23 100644
--- a/src/mobile/ImageUpload.tsx
+++ b/src/mobile/ImageUpload.tsx
@@ -50,6 +50,8 @@ class Uploader extends React.Component {
                         body: formData
                     });
                     this.status = "upload image, getting json";
+                    this.status = await res.text();
+                    return;
                     const json = await res.json();
                     json.map(async (file: any) => {
                         let path = window.location.origin + file;
-- 
cgit v1.2.3-70-g09d2


From a2faa344dc76407e8120ffb83d7431b851d01cb8 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Thu, 23 May 2019 01:34:46 -0400
Subject: final image upload change?

---
 src/mobile/ImageUpload.tsx | 2 --
 1 file changed, 2 deletions(-)

(limited to 'src/mobile')

diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx
index 6ca3a6f23..bfc1738fc 100644
--- a/src/mobile/ImageUpload.tsx
+++ b/src/mobile/ImageUpload.tsx
@@ -50,8 +50,6 @@ class Uploader extends React.Component {
                         body: formData
                     });
                     this.status = "upload image, getting json";
-                    this.status = await res.text();
-                    return;
                     const json = await res.json();
                     json.map(async (file: any) => {
                         let path = window.location.origin + file;
-- 
cgit v1.2.3-70-g09d2