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 = "";}} + /> + + ) +}