4 files changed, 49 insertions, 18 deletions

diff --git a/web/src/js/actions.js b/web/src/js/actions.js
index 6ded4c44..c77cdf73 100644
--- a/web/src/js/actions.js
+++ b/web/src/js/actions.js
@@ -1,6 +1,6 @@
 import $ from "jquery";
-import _ from "lodash";
 import {AppDispatcher} from "./dispatcher.js";
+import {fetchApi} from "./utils.js";
 
 export var ActionTypes = {
     // Connection
@@ -117,6 +117,16 @@ export var FlowActions = {
     },
     clear: function(){
         $.post("/clear");
+    },
+    download: () => window.location = "/flows/dump",
+
+    upload: (file) => {
+        let data = new FormData();
+        data.append('file', file);
+        fetchApi("/flows/dump",  {
+            method: 'post',
+            body: data
+        })
     }
 };
 
diff --git a/web/src/js/components/header.js b/web/src/js/components/header.js
index e329b3f5..4152e95c 100644
--- a/web/src/js/components/header.js
+++ b/web/src/js/components/header.js
@@ -331,12 +331,19 @@ var FileMenu = React.createClass({
         }
     },
     handleOpenClick: function (e) {
+        this.fileInput.click();
+        e.preventDefault();
+    },
+    handleOpenFile: function (e) {
+        if (e.target.files.length > 0) {
+            FlowActions.upload(e.target.files[0]);
+            this.fileInput.value = "";
+        }
         e.preventDefault();
-        console.error("unimplemented: handleOpenClick");
     },
     handleSaveClick: function (e) {
         e.preventDefault();
-        console.error("unimplemented: handleSaveClick");
+        FlowActions.download();
     },
     handleShutdownClick: function (e) {
         e.preventDefault();
@@ -355,6 +362,20 @@ var FileMenu = React.createClass({
                             New
                         </a>
                     </li>
+                    <li>
+                        <a href="#" onClick={this.handleOpenClick}>
+                         <i className="fa fa-fw fa-folder-open"></i>
+                            Open...
+                        </a>
+                         <input ref={(ref) => this.fileInput = ref}  className="hidden" type="file" onChange={this.handleOpenFile}/>
+
+                    </li>
+                    <li>
+                        <a href="#" onClick={this.handleSaveClick}>
+                            <i className="fa fa-fw fa-floppy-o"></i>
+                            Save...
+                        </a>
+                    </li>
                     <li role="presentation" className="divider"></li>
                     <li>
                         <a href="http://mitm.it/" target="_blank">
@@ -363,18 +384,6 @@ var FileMenu = React.createClass({
                         </a>
                     </li>
                 {/*
-                 <li>
-                 <a href="#" onClick={this.handleOpenClick}>
-                 <i className="fa fa-fw fa-folder-open"></i>
-                 Open
-                 </a>
-                 </li>
-                 <li>
-                 <a href="#" onClick={this.handleSaveClick}>
-                 <i className="fa fa-fw fa-save"></i>
-                 Save
-                 </a>
-                 </li>
                  <li role="presentation" className="divider"></li>
                  <li>
                  <a href="#" onClick={this.handleShutdownClick}>
diff --git a/web/src/js/store/store.js b/web/src/js/store/store.js
index e41b2eef..a16a0369 100644
--- a/web/src/js/store/store.js
+++ b/web/src/js/store/store.js
@@ -2,7 +2,7 @@
 import _ from "lodash";
 import $ from "jquery";
 import {EventEmitter} from 'events';
-
+import { EventLogActions } from "../actions.js"
 import {ActionTypes, StoreCmds} from "../actions.js";
 import {AppDispatcher} from "../dispatcher.js";
 
diff --git a/web/src/js/utils.js b/web/src/js/utils.js
index 2627cf58..97737b20 100644
--- a/web/src/js/utils.js
+++ b/web/src/js/utils.js
@@ -80,7 +80,7 @@ function getCookie(name) {
     var r = document.cookie.match(new RegExp("\\b" + name + "=([^;]*)\\b"));
     return r ? r[1] : undefined;
 }
-var xsrf = $.param({_xsrf: getCookie("_xsrf")});
+const xsrf = `_xsrf=${getCookie("_xsrf")}`;
 
 //Tornado XSRF Protection.
 $.ajaxPrefilter(function (options) {
@@ -101,4 +101,16 @@ $(document).ajaxError(function (event, jqXHR, ajaxSettings, thrownError) {
     console.error(thrownError, message, arguments);
     actions.EventLogActions.add_event(thrownError + ": " + message);
     alert(message);
-});
\ No newline at end of file
+});
+
+export function fetchApi(url, options) {
+    if(url.indexOf("?") === -1){
+        url += "?" + xsrf;
+    } else {
+        url += "&" + xsrf;
+    }
+    return fetch(url, {
+        ...options,
+        credentials: 'same-origin'
+    });
+}
\ No newline at end of file