diff options
Diffstat (limited to 'web')
-rw-r--r-- | web/react/components/setting_upload.jsx | 92 |
1 files changed, 33 insertions, 59 deletions
diff --git a/web/react/components/setting_upload.jsx b/web/react/components/setting_upload.jsx index 85e452d4e..ccb26cc58 100644 --- a/web/react/components/setting_upload.jsx +++ b/web/react/components/setting_upload.jsx @@ -7,29 +7,31 @@ export default class SettingsUpload extends React.Component { this.doFileSelect = this.doFileSelect.bind(this); this.doSubmit = this.doSubmit.bind(this); - this.onFileSelect = this.onFileSelect.bind(this); this.state = { clientError: this.props.clientError, serverError: this.props.serverError, - fileSelected: '' + filename: '' }; } componentWillReceiveProps() { this.setState({ clientError: this.props.clientError, - serverError: this.props.serverError, - fileSelected: '' + serverError: this.props.serverError }); } doFileSelect(e) { e.preventDefault(); + var filename = $(e.target).val(); + if (filename.substring(3, 11) === 'fakepath') { + filename = filename.substring(12); + } this.setState({ clientError: '', serverError: '', - fileSelected: '' + filename }); } @@ -43,71 +45,28 @@ export default class SettingsUpload extends React.Component { } } - onFileSelect(e) { - var filename = $(e.target).val(); - if (filename.substring(3, 11) === 'fakepath') { - filename = filename.substring(12); - } - this.setState({ - fileSelected: filename - }); - } - render() { - var clientError = null; + let clientError = null; if (this.state.clientError) { clientError = ( <div className='file-status'>{this.state.clientError}</div> ); } - var serverError = null; + let serverError = null; if (this.state.serverError) { serverError = ( <div className='file-status'>{this.state.serverError}</div> ); } - var fileSelected = ( - <div> - <span className='btn btn-sm btn-primary btn-file sel-btn'> - {'Select file'} - <input - ref='uploadinput' - accept={this.props.fileTypesAccepted} - type='file' - onChange={this.onFileSelect} - /> - </span> - <a - className={'btn btn-sm btn-primary disabled'} - onClick={this.doSubmit} - > - {'Import'} - </a> - <div className='file-status file-name hidden'></div> - </div> - ); - if (this.state.fileSelected) { - fileSelected = ( - <div> - <span className='btn btn-sm btn-primary btn-file sel-btn'> - {'Select file'} - <input - ref='uploadinput' - accept={this.props.fileTypesAccepted} - type='file' - onChange={this.onFileSelect} - /> - </span> - <a - className={'btn btn-sm btn-primary'} - onClick={this.doSubmit} - > - {'Import'} - </a> - <div className='file-status file-name'>{this.state.fileSelected}</div> - </div> + let fileNameText = null; + let submitButtonClass = 'btn btn-sm btn-primary disabled'; + if (this.state.filename) { + fileNameText = ( + <div className='file-status file-name'>{this.state.filename}</div> ); + submitButtonClass = 'btn btn-sm btn-primary'; } + return ( <ul className='section-max'> <li className='col-sm-12 section-title'>{this.props.title}</li> @@ -115,7 +74,22 @@ export default class SettingsUpload extends React.Component { <li className='col-sm-offset-3 col-sm-9'> <ul className='setting-list'> <li className='setting-list-item'> - {fileSelected} + <span className='btn btn-sm btn-primary btn-file sel-btn'> + {'Select file'} + <input + ref='uploadinput' + accept={this.props.fileTypesAccepted} + type='file' + onChange={this.doFileSelect} + /> + </span> + <a + className={submitButtonClass} + onClick={this.doSubmit} + > + {'Import'} + </a> + {fileNameText} {serverError} {clientError} </li> @@ -133,4 +107,4 @@ SettingsUpload.propTypes = { clientError: React.PropTypes.string, serverError: React.PropTypes.string, helpText: React.PropTypes.object -}; +};
\ No newline at end of file |