diff options
author | Christopher Speller <crspeller@gmail.com> | 2016-03-14 08:50:46 -0400 |
---|---|---|
committer | Christopher Speller <crspeller@gmail.com> | 2016-03-16 18:02:55 -0400 |
commit | 12896bd23eeba79884245c1c29fdc568cf21a7fa (patch) | |
tree | 4e7f83d3e2564b9b89d669e9f7905ff11768b11a /webapp/components/setting_upload.jsx | |
parent | 29fe6a3d13c9c7aa490fffebbe5d1b5fdf1e3090 (diff) | |
download | chat-12896bd23eeba79884245c1c29fdc568cf21a7fa.tar.gz chat-12896bd23eeba79884245c1c29fdc568cf21a7fa.tar.bz2 chat-12896bd23eeba79884245c1c29fdc568cf21a7fa.zip |
Converting to Webpack. Stage 1.
Diffstat (limited to 'webapp/components/setting_upload.jsx')
-rw-r--r-- | webapp/components/setting_upload.jsx | 127 |
1 files changed, 127 insertions, 0 deletions
diff --git a/webapp/components/setting_upload.jsx b/webapp/components/setting_upload.jsx new file mode 100644 index 000000000..04e2de301 --- /dev/null +++ b/webapp/components/setting_upload.jsx @@ -0,0 +1,127 @@ +// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import $ from 'jquery'; +import ReactDOM from 'react-dom'; +import {FormattedMessage} from 'react-intl'; + +import React from 'react'; + +export default class SettingsUpload extends React.Component { + constructor(props) { + super(props); + + this.doFileSelect = this.doFileSelect.bind(this); + this.doSubmit = this.doSubmit.bind(this); + + this.state = { + clientError: this.props.clientError, + serverError: this.props.serverError, + filename: '' + }; + } + + componentWillReceiveProps() { + this.setState({ + clientError: this.props.clientError, + 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: '', + filename + }); + } + + doSubmit(e) { + e.preventDefault(); + var inputnode = ReactDOM.findDOMNode(this.refs.uploadinput); + if (inputnode.files && inputnode.files[0]) { + this.props.submit(inputnode.files[0]); + } else { + this.setState({clientError: true}); + } + } + + render() { + let clientError = null; + if (this.state.clientError) { + clientError = ( + <div className='file-status'> + <FormattedMessage + id='setting_upload.noFile' + defaultMessage='No file selected.' + /> + </div> + ); + } + let serverError = null; + if (this.state.serverError) { + serverError = ( + <div className='file-status'>{this.state.serverError}</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> + <li className='col-sm-offset-3 col-sm-9'>{this.props.helpText}</li> + <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'> + <FormattedMessage + id='setting_upload.select' + defaultMessage='Select file' + /> + <input + ref='uploadinput' + accept={this.props.fileTypesAccepted} + type='file' + onChange={this.doFileSelect} + /> + </span> + <a + className={submitButtonClass} + onClick={this.doSubmit} + > + <FormattedMessage + id='setting_upload.import' + defaultMessage='Import' + /> + </a> + {fileNameText} + {serverError} + {clientError} + </li> + </ul> + </li> + </ul> + ); + } +} + +SettingsUpload.propTypes = { + title: React.PropTypes.string.isRequired, + submit: React.PropTypes.func.isRequired, + fileTypesAccepted: React.PropTypes.string.isRequired, + clientError: React.PropTypes.string, + serverError: React.PropTypes.string, + helpText: React.PropTypes.object +};
\ No newline at end of file |