diff --git a/web/src/js/components/ContentView/UploadContentButton.jsx b/web/src/js/components/ContentView/UploadContentButton.jsx
index 0652b584a..6764e2341 100644
--- a/web/src/js/components/ContentView/UploadContentButton.jsx
+++ b/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 (
- fileInput.click()}
- title="Upload a file to replace the content.">
-
- fileInput = ref}
- className="hidden"
- type="file"
- onChange={e => {
- if (e.target.files.length > 0) uploadContent(e.target.files[0])
- }}
- />
-
-
+
)
}
diff --git a/web/src/js/components/Header/FileMenu.jsx b/web/src/js/components/Header/FileMenu.jsx
index d3786475b..392cc163d 100644
--- a/web/src/js/components/Header/FileMenu.jsx
+++ b/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) {
- e.preventDefault()
- if (e.target.files.length > 0) {
- this.props.loadFlows(e.target.files[0])
- this.fileInput.value = ''
- }
+ onOpenFile(file) {
+ this.props.loadFlows(file)
}
onSaveClick(e) {
@@ -70,15 +75,10 @@ class FileMenu extends Component {
-
-
- Open...
-
- this.fileInput = ref}
- className="hidden"
- type="file"
- onChange={this.onOpenFile}
+
diff --git a/web/src/js/components/common/FileChooser.jsx b/web/src/js/components/common/FileChooser.jsx
new file mode 100644
index 000000000..d8a80ad7c
--- /dev/null
+++ b/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 (
+ fileInput.click()}
+ className={className}
+ title={title}>
+
+ {text}
+ fileInput = ref}
+ className="hidden"
+ type="file"
+ onChange={e => { e.preventDefault(); if(e.target.files.length > 0) onOpenFile(e.target.files[0]); fileInput = "";}}
+ />
+
+ )
+}