v1.1 Reduce runtimes, compress images before uploading

Author: matthew29tang

package-lock.json

@@ -5,6 +5,7 @@
   "homepage": "https://matthew29tang.github.io/hypervision/",
   "dependencies": {
     "@material-ui/core": "^4.1.1",
+    "browser-image-compression": "^1.0.6",
     "gh-pages": "^2.1.1",
     "react": "^16.9.0",
     "react-copy-to-clipboard": "^5.0.1",

package.json

@@ -0,0 +1,24 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import './Pages.css';
+
+const styles = theme => ({
+  logo: {
+    marginTop: "150px",
+    marginBottom: "150px",
+  },
+});
+
+class Logo extends React.Component {
+
+  render() {
+    const { classes } = this.props;
+    return (
+      <div className={classes.logo}>
+        <img src={require("./ocr-icon.png")} alt="logo"/>
+      </div>
+    );
+  }
+}
+
+export default withStyles(styles)(Logo);

src/components/Logo.js

@@ -12,6 +12,7 @@ import Grid from '@material-ui/core/Grid';
 
 import About from "../About.js";
 import Vision from "../Vision.js";
+import Logo from "../Logo.js";
 
 const styles = theme => ({
   root: {
@@ -28,6 +29,7 @@ const routing = (
       <Switch>
         <Route exact path="/" component={Vision} />
         <Route path="/about" component={About} />
+        <Route path="/logo" component={Logo} />
       </Switch>
     </div>
   </Router>

src/components/Router/Router.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import imageCompression from 'browser-image-compression';
 import Divider from '@material-ui/core/Divider';
 import Dropzone from './Dropzone/Dropzone.js';
 import Progress from './Progress/Progress.js';
@@ -17,6 +18,8 @@ class Upload extends React.Component {
       uploadProgress: {},
       successfullUploaded: false
     };
+    // Ping the backend so we can get it spinning
+    fetch(BACKEND_URL);
   }
 
   onFilesAdded = (file) => {
@@ -48,10 +51,17 @@ class Upload extends React.Component {
   uploadFiles = (file) => {
     this.setState({ uploadProgress: {}, uploading: true });
     try {
-      this.sendRequest(file);
+      var options = {
+        maxSizeMB: 1,
+        maxWidthOrHeight: 1920,
+      }
+      imageCompression(file, options)
+        .then(compressed => {
+          this.sendRequest(compressed)
+        })
       this.setState({ successfullUploaded: true, uploading: false });
     } catch (e) {
-      this.setState({ successfullUploaded: true, uploading: false });
+      this.setState({ successfullUploaded: false, uploading: false });
     }
   }
 
@@ -83,7 +93,6 @@ class Upload extends React.Component {
 
     const formData = new FormData();
     formData.append("image", file, "image");
-    console.log("Uploading...");
     req.open("POST", BACKEND_URL);
     req.send(formData);
     req.onreadystatechange = () => {
@@ -114,7 +123,7 @@ class Upload extends React.Component {
           <div id="Files">
             Uploading image... 
             <br/>
-            (this can take up to 5-10 secs for large images)
+            (this can take up to 5 secs for large images)
             {/*
             <div key={this.state.files.name} id="Row">
               {this.renderProgress(this.state.files)}