diff options
Diffstat (limited to 'web/react')
-rw-r--r-- | web/react/components/setting_upload.jsx | 73 |
1 files changed, 52 insertions, 21 deletions
diff --git a/web/react/components/setting_upload.jsx b/web/react/components/setting_upload.jsx index fad27b355..85e452d4e 100644 --- a/web/react/components/setting_upload.jsx +++ b/web/react/components/setting_upload.jsx @@ -11,14 +11,16 @@ export default class SettingsUpload extends React.Component { this.state = { clientError: this.props.clientError, - serverError: this.props.serverError + serverError: this.props.serverError, + fileSelected: '' }; } componentWillReceiveProps() { this.setState({ clientError: this.props.clientError, - serverError: this.props.serverError + serverError: this.props.serverError, + fileSelected: '' }); } @@ -26,7 +28,8 @@ export default class SettingsUpload extends React.Component { e.preventDefault(); this.setState({ clientError: '', - serverError: '' + serverError: '', + fileSelected: '' }); } @@ -45,8 +48,9 @@ export default class SettingsUpload extends React.Component { if (filename.substring(3, 11) === 'fakepath') { filename = filename.substring(12); } - $(e.target).closest('li').find('.file-status').addClass('hide'); - $(e.target).closest('li').find('.file-name').removeClass('hide').html(filename); + this.setState({ + fileSelected: filename + }); } render() { @@ -62,6 +66,48 @@ export default class SettingsUpload extends React.Component { <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> + ); + } return ( <ul className='section-max'> <li className='col-sm-12 section-title'>{this.props.title}</li> @@ -69,22 +115,7 @@ 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'> - <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 hide'></div> + {fileSelected} {serverError} {clientError} </li> |