Upload and Download Process

Author: kashifghaffarasim

examples/main.jsx

@@ -32,6 +32,8 @@ import RemoveIcon from '@material-ui/icons/Remove';
 import DownloadIcon from '@material-ui/icons/CloudDownload';
 import ZoomInIcon from '@material-ui/icons/ZoomIn';
 import ZoomOutIcon from '@material-ui/icons/ZoomOut';
+import UploadIcon from '@material-ui/icons/Backup';
+
 import dataJson from './data.json';
 import dataJsonControlled from './data.json.controlled';
 import {SketchField, Tools} from '../src';
@@ -91,7 +93,7 @@ const styles = {
   },
   card: {
     margin: '10px 10px 5px 0'
-  }
+  },
 };
 
 /**
@@ -111,6 +113,9 @@ function eventFire(el, etype) {
   }
 }
 
+
+
+
 class SketchFieldDemo extends React.Component {
 
   constructor(props) {
@@ -124,7 +129,7 @@ class SketchFieldDemo extends React.Component {
       shadowWidth: 0,
       shadowOffset: 0,
       tool: Tools.Select,
-      enableRemoveSelected: false,
+      enableRemoveSelected: true,
       fillWithColor: false,
       fillWithBackgroundColor: false,
       drawings: [],
@@ -200,9 +205,6 @@ class SketchFieldDemo extends React.Component {
     this._sketch.download();
   };
 
- // Start
- //
- // Process
 
  _getHash = (obj, obArray) => {
 
@@ -341,7 +343,7 @@ class SketchFieldDemo extends React.Component {
       let { stretched, stretchedX, stretchedY, originX, originY } = this.state;
       reader.addEventListener(
         'load',
-        () =>sketch.setBackgroundFromDataUrl(reader.result, {
+        () => sketch.setBackgroundFromDataUrl(reader.result, {
             stretched: stretched,
             stretchedX: stretchedX,
             stretchedY: stretchedY,
@@ -357,6 +359,20 @@ class SketchFieldDemo extends React.Component {
 
   _addText = () => this._sketch.addText(this.state.text);
 
+  _readFile = (event) => {
+      let sketch = this._sketch;
+      let file = event.target.files[0]
+      if(file){
+          let reader = new FileReader();
+          reader.onload = function (e) {
+              let data = e.target.result;
+              console.log(data);
+              sketch.fromJSON(data);
+          }
+          reader.readAsText(file);
+      }
+  }
+
   componentDidMount = () => {
     (function(console) {
       console.save = function(data, filename) {
@@ -378,8 +394,11 @@ class SketchFieldDemo extends React.Component {
         a.dispatchEvent(e);
       };
     })(console);
+
   };
 
+
+
   render = () => {
     let { controlledValue } = this.state;
     const theme = createMuiTheme({
@@ -430,12 +449,23 @@ class SketchFieldDemo extends React.Component {
                   onClick={this._save}>
                   <SaveIcon/>
                 </IconButton>
+                <Button
+                      style={{background: 'none', border: 'none', color: '#607d8b', boxShadow: 'none'}}
+                      variant="contained"
+                      component="label"
+                      title="Upload"  >
+                      <UploadIcon />
+                      <input   type="file"
+                        onChange={(e) => this._readFile(e)}
+                        style={{ display: "none" }}  />
+                    </Button>
                 <IconButton
                   color="primary"
                   title="Download"
                   onClick={this._download}>
                   <DownloadIcon/>
                 </IconButton>
+
                 <IconButton
                   color="primary"
                   title="Delete All"

src/history.js

@@ -82,15 +82,20 @@ class History {
    * @returns the new current value after the redo operation, or null if no redo operation was possible
    */
   redo() {
+    console.log('heres')
     try {
+      console.log('checking is here')
+      console.log(this.redoList)
       if (this.redoList.length > 0) {
+
         if (this.current) this.undoList.push(this.current);
         this.current = this.redoList.pop();
         return this.current;
       }
+
       return null;
     } finally {
-      this.print();
+      //this.print();
     }
   }
 
@@ -128,15 +133,22 @@ class History {
      *
      */
   saveToFile() {
-    var allElement = this.undoList;
-    if(this.current){
-      if(this.redoList.length == 0){
-        allElement = this.current
+      let dataArray = [];
+
+      if(this.current){
+        if(this.undoList.length == 0){
+          allElement = this.current[0]
+          dataArray.push(this.current[0])
+        } else {
+          for(let i = 0; i < this.undoList.length; i++){
+            dataArray.push(this.undoList[i][0])
+          }
+        }
       }
-    }
 
+      var hash = {"objects": dataArray}
       const a = document.createElement("a");
-      a.href = URL.createObjectURL(new Blob([JSON.stringify(allElement, null, 4)], {
+      a.href = URL.createObjectURL(new Blob([JSON.stringify(hash, null, 4)], {
         type: "text/plain"
       }));
       a.setAttribute("download", "image.txt");