added uploader

client/src/app/components/molecules/common/CommandPrompt/CommandPrompt.component.scss

@@ -15,6 +15,14 @@
 		&.md-light{color:rgb(33, 37, 41)}
 		&.md-36{font-size:36px}
 	}
+
+	.loading {    
+		background-color: #ffffff;
+		background-image: url("http://loadinggif.com/images/image-selection/3.gif");
+		background-size: 25px 25px;
+		background-position: 98%;
+		background-repeat: no-repeat;
+	}
 	
 	.navbar {
 		padding: 5px;

client/src/app/components/molecules/common/CommandPrompt/CommandPrompt.js

@@ -67,9 +67,10 @@ class CommandPrompt extends React.Component {
   }
 
   executeCommand() {
-    alert('called')
+    const commandField = $('#command')
+    commandField.toggleClass('loading')
     // this.domOpsService.hideNonCards();
-    let commandVal = $('#command').val();
+    let commandVal = commandField.val();
     console.log(commandVal)
     if(!commandVal) {
       // this.domOpsService.showEmptyCommandMessage(this.emptyCommandMessage);
@@ -100,7 +101,6 @@ class CommandPrompt extends React.Component {
           <div className="container-fluid">
             <input type="text" className="form-control" placeholder="What you need..."
               name="command" id="command" onKeyUp={(event) => this.initiateDomOpsOnEnter(event, this.executeCommand, 2000)}
-              // onClick={showContextMenu} #command>
               onClick={this.showContextMenu} />
             <div className="dropdown-menu" aria-labelledby="dropdownMenuButton" id="inputSelectionContextMenu">
               <Link to="#" className="dropdown-item" onClick={this.executeCommand}>Fire</Link>

client/src/app/components/molecules/common/Dropzone/Dropzone.js

@@ -20,6 +20,9 @@ class Dropzone extends React.Component {
 
   onFilesAdded(evt) {
     if (this.props.disabled) return;
+    console.log(evt.target.files)
+    console.log(evt.target.result)
+
     const files = evt.target.files;
     if (this.props.onFilesAdded) {
       const array = this.fileListToArray(files);
@@ -69,7 +72,7 @@ class Dropzone extends React.Component {
         <img
           alt="upload"
           className="Icon"
-          src="/images/cloud.svg"
+          src="/images/cloud.jpg"
         />
         <input
           ref={this.fileInputRef}

client/src/app/components/molecules/common/Uploader/Uploader.js

@@ -3,13 +3,14 @@ import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import {createPropsSelector} from 'reselect-immutable-helpers';
 import {withStyles} from '@material-ui/core/styles';
+import ImageService from './../../../../services/image.service.ts'
 import {updateUploadModalState} from '../../../../pages/Home/actions';
 import {getUploadModalState} from '../../../../pages/Home/selectors';
 import Dropzone from './../Dropzone'
 import Progress from '../Progress';
 import Modal from '@material-ui/core/Modal';
 import Backdrop from '@material-ui/core/Backdrop';
-import {Zoom, Paper} from '@material-ui/core';
+import {Zoom, Paper, responsiveFontSizes} from '@material-ui/core';
 
 const styles = theme => ({
   modal: {
@@ -32,15 +33,18 @@ class Uploader extends React.Component {
     super(props)
     this.state = {
       files: [],
+      imageURI: [],
       uploading: false,
       uploadProgress: {},
       successfullUploaded: false
     };
     this.onFilesAdded = this.onFilesAdded.bind(this);
-    this.uploadFiles = this.uploadFiles.bind(this);
+    this.uploadFile = this.uploadFile.bind(this);
     this.sendRequest = this.sendRequest.bind(this);
     this.renderActions = this.renderActions.bind(this);
     this.renderProgress = this.renderProgress.bind(this);
+    this.compressAndUploadFiles = this.compressAndUploadFiles.bind(this);
+    this.compressFile = this.compressFile.bind(this);
   }
 
   onFilesAdded(files) {
@@ -58,7 +62,7 @@ class Uploader extends React.Component {
           <img
             className="CheckIcon"
             alt="done"
-            src="baseline-check_circle_outline-24px.svg"
+            src="/images/cloud.jpg"
             style={{
               opacity:
                 uploadProgress && uploadProgress.state === "done" ? 0.5 : 0
@@ -72,11 +76,7 @@ class Uploader extends React.Component {
   renderActions() {
     if (this.state.successfullUploaded) {
       return (
-        <button
-          onClick={() =>
-            this.setState({ files: [], successfullUploaded: false })
-          }
-        >
+        <button onClick={() => this.setState({files: [], successfullUploaded: false})}>
           Clear
         </button>
       );
@@ -84,23 +84,66 @@ class Uploader extends React.Component {
       return (
         <button
           disabled={this.state.files.length < 0 || this.state.uploading}
-          onClick={this.uploadFiles}
+          onClick={() => this.compressAndUploadFiles(this.uploadFile)}
         >
           Upload
         </button>
       );
     }
   }
-  
-  async uploadFiles() {
+
+  readURI(file){
+    return new Promise((resolve, reject) => {
+      let reader = new FileReader()
+      reader.onload = (ev) => {
+        resolve(ev.target.result)
+      }
+      reader.readAsDataURL(file)
+    })
+  }
+
+  handleChange(e){
+    this.readURI(e); // maybe call this with webworker or async library?
+    if (this.props.onChange !== undefined)
+      this.props.onChange(e); // propagate to parent component
+  }
+
+  compressAndUploadFiles(callback) {
+    const jic = new ImageService()
     this.setState({ uploadProgress: {}, uploading: true });
     const promises = [];
-    this.state.files.forEach(file => {
-      promises.push(this.sendRequest(file));
+    this.state.files.forEach((file) => {
+      this.readURI(file).then((result) => {
+        file.image_source = result
+        this.compressFile(file, jic).then(async (result) => {
+          // callback(result)
+          promises.push(this.sendRequest(result));
+          try {
+            await Promise.all(promises);
+            this.setState({ successfullUploaded: true, uploading: false });
+          } catch (e) {
+            // Not Production ready! Do some error handling here instead...
+            this.setState({ successfullUploaded: true, uploading: false });
+          }
+        })
+      })
+    })
+  }
+  
+  compressFile(file, jic) {
+    return new Promise((resolve, reject) => {
+      resolve(jic.compress(file, 20))
     });
+  }
+
+  async uploadFile(file) {
+    this.setState({ uploadProgress: {}, uploading: true });
+    const promises = [];
+    // this.state.files.forEach(file => {
+    promises.push(this.sendRequest(file));
+    // });
     try {
       await Promise.all(promises);
-  
       this.setState({ successfullUploaded: true, uploading: false });
     } catch (e) {
       // Not Production ready! Do some error handling here instead...

client/src/app/services/image.service.ts

@@ -1,8 +1,10 @@
-export class ImageService {
+export default class ImageService {
 
   constructor() { }
 
-  compress(source_img_obj, quality, output_format) {
+  compress(source_img_file, quality, output_format) {
+    var img = document.createElement('img')
+    img.src = source_img_file.image_source;
 
     var mime_type;
     if (output_format === "png") {
@@ -14,13 +16,22 @@ export class ImageService {
     }
   
     var cvs = document.createElement('canvas');
-    cvs.width = source_img_obj.naturalWidth;
-    cvs.height = source_img_obj.naturalHeight;
-    var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0);
+    // cvs.width = img.naturalWidth;
+    // cvs.height = img.naturalHeight;
+    var ctx = cvs.getContext("2d").drawImage(img, 0, 0);
     var newImageData = cvs.toDataURL(mime_type, quality / 100);
-    var result_image_obj = new Image();
-    result_image_obj.src = newImageData;
-    return result_image_obj;
+    // var result_image_obj = new Image();
+    // result_image_obj.src = newImageData;
+    // return result_image_obj;
+    var byteString = atob(newImageData.split(',')[1]);
+    var mimeString = newImageData.split(',')[0].split(':')[1].split(';')[0];
+    var ab = new ArrayBuffer(byteString.length);
+    var ia = new Uint8Array(ab);
+    for (var i = 0; i < byteString.length; i++) {
+        ia[i] = byteString.charCodeAt(i);
+    }
+    return new Blob([ab], {type: mimeString});
+    // return newImageData
   }
 
   upload(compressed_img_obj, upload_url, file_input_name, filename, successCallback, errorCallback, duringCallback, customHeaders) {