refactor file up and download

web/src/js/components/ContentView/UploadContentButton.jsx

@@ -1,4 +1,5 @@
 import { PropTypes } from 'react'
+import FileChooser from '../common/FileChooser'
 
 UploadContentButton.propTypes = {
     uploadContent: PropTypes.func.isRequired,
@@ -9,20 +10,11 @@ export default function UploadContentButton({ uploadContent }) {
     let fileInput;
 
     return (
-        <a className="btn btn-default btn-xs"
+        <FileChooser
-           onClick={() => fileInput.click()}
+            icon="fa-upload"
-           title="Upload a file to replace the content.">
+            title="Upload a file to replace the content."
-            <i className="fa fa-upload"/>
+            onOpenFile={uploadContent}
-            <input
+            className="btn btn-default btn-xs"/>
-                ref={ref => fileInput = ref}
-                className="hidden"
-                type="file"
-                onChange={e => {
-                    if (e.target.files.length > 0) uploadContent(e.target.files[0])
-                }}
-            />
-        </a>
-
     )
 }
 

web/src/js/components/Header/FileMenu.jsx

@@ -1,10 +1,19 @@
-import React, { Component } from 'react'
+import React, { Component, PropTypes } from 'react'
 import { connect } from 'react-redux'
 import classnames from 'classnames'
+import FileChooser from '../common/FileChooser'
 import * as flowsActions from '../../ducks/flows'
 
+
+
 class FileMenu extends Component {
 
+    static propTypes = {
+        clearFlows: PropTypes.func.isRequired,
+        loadFlows: PropTypes.func.isRequired,
+        saveFlows: PropTypes.func.isRequired
+    }
+
     constructor(props, context) {
         super(props, context)
         this.state = { show: false }
@@ -45,12 +54,8 @@ class FileMenu extends Component {
         this.fileInput.click()
     }
 
-    onOpenFile(e) {
+    onOpenFile(file) {
-        e.preventDefault()
+        this.props.loadFlows(file)
-        if (e.target.files.length > 0) {
-            this.props.loadFlows(e.target.files[0])
-            this.fileInput.value = ''
-        }
     }
 
     onSaveClick(e) {
@@ -70,15 +75,10 @@ class FileMenu extends Component {
                         </a>
                     </li>
                     <li>
-                        <a href="#" onClick={this.onOpenClick}>
+                        <FileChooser
-                            <i className="fa fa-fw fa-folder-open"></i>
+                            icon="fa-folder-open"
-                            Open...
+                            text="Open..."
-                        </a>
+                            onOpenFile={this.onOpenFile}
-                        <input
-                            ref={ref => this.fileInput = ref}
-                            className="hidden"
-                            type="file"
-                            onChange={this.onOpenFile}
                         />
                     </li>
                     <li>

web/src/js/components/common/FileChooser.jsx

@@ -0,0 +1,27 @@
+import React, { PropTypes } from 'react'
+
+FileChooser.propTypes = {
+    icon: PropTypes.string,
+    text: PropTypes.string,
+    className: PropTypes.string,
+    title: PropTypes.string,
+    onOpenFile: PropTypes.func.isRequired
+}
+
+export default function FileChooser({ icon, text, className, title, onOpenFile }) {
+    let fileInput;
+    return (
+        <a onClick={() => fileInput.click()}
+           className={className}
+           title={title}>
+            <i className={'fa fa-fw ' + icon}></i>
+            {text}
+             <input
+                ref={ref => fileInput = ref}
+                className="hidden"
+                type="file"
+                onChange={e => { e.preventDefault(); if(e.target.files.length > 0) onOpenFile(e.target.files[0]); fileInput = "";}}
+            />
+        </a>
+    )
+}