Merge branch 'moreUpgrading' into dataViz-annotations

1 files changed, 44 insertions, 53 deletions

diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx
index da38fcaee..d2598c2db 100644
--- a/src/mobile/ImageUpload.tsx
+++ b/src/mobile/ImageUpload.tsx
@@ -5,45 +5,44 @@ import * as rp from 'request-promise';
 import { DocServer } from '../client/DocServer';
 import { Docs } from '../client/documents/Documents';
 import { Networking } from '../client/Network';
-import { DFLT_IMAGE_NATIVE_DIM } from '../client/views/global/globalCssVariables.scss';
 import { MainViewModal } from '../client/views/MainViewModal';
 import { Doc, Opt } from '../fields/Doc';
 import { List } from '../fields/List';
 import { listSpec } from '../fields/Schema';
 import { Cast } from '../fields/Types';
 import { Utils } from '../Utils';
-import "./ImageUpload.scss";
+import './ImageUpload.scss';
 import { MobileInterface } from './MobileInterface';
-import React = require('react');
-
+import * as React from 'react';
+const { default: { DFLT_IMAGE_NATIVE_DIM } } = require('../client/views/global/globalCssVariables.module.scss'); // prettier-ignore
 export interface ImageUploadProps {
     Document: Doc; // Target document for upload (upload location)
 }
 
 const inputRef = React.createRef<HTMLInputElement>();
-const defaultNativeImageDim = Number(DFLT_IMAGE_NATIVE_DIM.replace("px", ""));
+const defaultNativeImageDim = Number(DFLT_IMAGE_NATIVE_DIM.replace('px', ''));
 
 @observer
 export class Uploader extends React.Component<ImageUploadProps> {
-    @observable error: string = "";
-    @observable nm: string = "Choose files"; // Text of 'Choose Files' button
-    @observable process: string = ""; // Current status of upload
+    @observable error: string = '';
+    @observable nm: string = 'Choose files'; // Text of 'Choose Files' button
+    @observable process: string = ''; // Current status of upload
 
     onClick = async () => {
         try {
             const col = this.props.Document;
             await Docs.Prototypes.initialize();
-            const imgPrev = document.getElementById("img_preview");
-            this.setOpacity(1, "1"); // Slab 1
+            const imgPrev = document.getElementById('img_preview');
+            this.setOpacity(1, '1'); // Slab 1
             if (imgPrev) {
                 const files: FileList | null = inputRef.current!.files;
-                this.setOpacity(2, "1"); // Slab 2
+                this.setOpacity(2, '1'); // Slab 2
                 if (files && files.length !== 0) {
-                    this.process = "Uploading Files";
+                    this.process = 'Uploading Files';
                     for (let index = 0; index < files.length; ++index) {
                         const file = files[index];
-                        const res = await Networking.UploadFilesToServer({file});
-                        this.setOpacity(3, "1"); // Slab 3
+                        const res = await Networking.UploadFilesToServer({ file });
+                        this.setOpacity(3, '1'); // Slab 3
                         // For each item that the user has selected
                         res.map(async ({ result }) => {
                             const name = file.name;
@@ -53,19 +52,19 @@ export class Uploader extends React.Component<ImageUploadProps> {
                             const path = result.accessPaths.agnostic.client;
                             let doc = null;
                             // Case 1: File is a video
-                            if (file.type === "video/mp4") {
+                            if (file.type === 'video/mp4') {
                                 doc = Docs.Create.VideoDocument(path, { _nativeWidth: defaultNativeImageDim, _width: 400, title: name });
                                 // Case 2: File is a PDF document
-                            } else if (file.type === "application/pdf") {
+                            } else if (file.type === 'application/pdf') {
                                 doc = Docs.Create.PdfDocument(path, { _nativeWidth: defaultNativeImageDim, _width: 400, title: name });
                                 // Case 3: File is another document type (most likely Image)
                             } else {
                                 doc = Docs.Create.ImageDocument(path, { _nativeWidth: defaultNativeImageDim, _width: 400, title: name });
                             }
-                            this.setOpacity(4, "1"); // Slab 4
-                            const res = await rp.get(Utils.prepend("/getUserDocumentIds"));
+                            this.setOpacity(4, '1'); // Slab 4
+                            const res = await rp.get(Utils.prepend('/getUserDocumentIds'));
                             if (!res) {
-                                throw new Error("No user id returned");
+                                throw new Error('No user id returned');
                             }
                             const field = await DocServer.GetRefField(JSON.parse(res).userDocumentId);
                             let pending: Opt<Doc>;
@@ -76,19 +75,19 @@ export class Uploader extends React.Component<ImageUploadProps> {
                                 const data = await Cast(pending.data, listSpec(Doc));
                                 if (data) data.push(doc);
                                 else pending.data = new List([doc]);
-                                this.setOpacity(5, "1"); // Slab 5
-                                this.process = "File " + (index + 1).toString() + " Uploaded";
-                                this.setOpacity(6, "1"); // Slab 6
+                                this.setOpacity(5, '1'); // Slab 5
+                                this.process = 'File ' + (index + 1).toString() + ' Uploaded';
+                                this.setOpacity(6, '1'); // Slab 6
                             }
-                            if ((index + 1) === files.length) {
-                                this.process = "Uploads Completed";
-                                this.setOpacity(7, "1"); // Slab 7
+                            if (index + 1 === files.length) {
+                                this.process = 'Uploads Completed';
+                                this.setOpacity(7, '1'); // Slab 7
                             }
                         });
                     }
                     // Case in which the user pressed upload and no files were selected
                 } else {
-                    this.process = "No file selected";
+                    this.process = 'No file selected';
                 }
                 // Three seconds after upload the menu will reset
                 setTimeout(this.clearUpload, 3000);
@@ -96,7 +95,7 @@ export class Uploader extends React.Component<ImageUploadProps> {
         } catch (error) {
             this.error = JSON.stringify(error);
         }
-    }
+    };
 
     // Updates label after a files is selected (so user knows a file is uploaded)
     inputLabel = async () => {
@@ -105,46 +104,48 @@ export class Uploader extends React.Component<ImageUploadProps> {
         if (files && files.length === 1) {
             this.nm = files[0].name;
         } else if (files && files.length > 1) {
-            this.nm = files.length.toString() + " files selected";
+            this.nm = files.length.toString() + ' files selected';
         }
-    }
+    };
 
     // Loops through load icons, and resets buttons
     @action
     clearUpload = () => {
         for (let i = 1; i < 8; i++) {
-            this.setOpacity(i, "0.2");
+            this.setOpacity(i, '0.2');
         }
-        this.nm = "Choose files";
+        this.nm = 'Choose files';
 
         if (inputRef.current) {
-            inputRef.current.value = "";
+            inputRef.current.value = '';
         }
-        this.process = "";
-    }
+        this.process = '';
+    };
 
     // Clears the upload and closes the upload menu
     closeUpload = () => {
         this.clearUpload();
         MobileInterface.Instance.toggleUpload();
-    }
+    };
 
     // Handles the setting of the loading bar
     setOpacity = (index: number, opacity: string) => {
-        const slab = document.getElementById("slab" + index);
+        const slab = document.getElementById('slab' + index);
         if (slab) slab.style.opacity = opacity;
-    }
+    };
 
     // Returns the upload interface for mobile
     private get uploadInterface() {
         return (
             <div className="imgupload_cont">
                 <div className="closeUpload" onClick={() => this.closeUpload()}>
-                    <FontAwesomeIcon icon="window-close" size={"lg"} />
+                    <FontAwesomeIcon icon="window-close" size={'lg'} />
                 </div>
-                <FontAwesomeIcon icon="upload" size="lg" style={{ fontSize: "130" }} />
-                <input type="file" accept="application/pdf, video/*,image/*" className={`inputFile ${this.nm !== "Choose files" ? "active" : ""}`} id="input_image_file" ref={inputRef} onChange={this.inputLabel} multiple></input>
-                <label className="file" id="label" htmlFor="input_image_file">{this.nm}</label>
+                <FontAwesomeIcon icon="upload" size="lg" style={{ fontSize: '130' }} />
+                <input type="file" accept="application/pdf, video/*,image/*" className={`inputFile ${this.nm !== 'Choose files' ? 'active' : ''}`} id="input_image_file" ref={inputRef} onChange={this.inputLabel} multiple></input>
+                <label className="file" id="label" htmlFor="input_image_file">
+                    {this.nm}
+                </label>
                 <div className="upload_label" onClick={this.onClick}>
                     Upload
                 </div>
@@ -167,16 +168,6 @@ export class Uploader extends React.Component<ImageUploadProps> {
     @observable private overlayOpacity = 0.4;
 
     render() {
-        return (
-            <MainViewModal
-                contents={this.uploadInterface}
-                isDisplayed={true}
-                interactive={true}
-                dialogueBoxDisplayedOpacity={this.dialogueBoxOpacity}
-                overlayDisplayedOpacity={this.overlayOpacity}
-                closeOnExternalClick={this.closeUpload}
-            />
-        );
+        return <MainViewModal contents={this.uploadInterface} isDisplayed={true} interactive={true} dialogueBoxDisplayedOpacity={this.dialogueBoxOpacity} overlayDisplayedOpacity={this.overlayOpacity} closeOnExternalClick={this.closeUpload} />;
     }
-
-}
\ No newline at end of file
+}