// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import $ from 'jquery';
import React from 'react';
import ReactDOM from 'react-dom';
import Client from 'client/web_client.jsx';
import * as Utils from 'utils/utils.jsx';
import FormError from 'components/form_error.jsx';
import {FormattedHTMLMessage, FormattedMessage} from 'react-intl';
export default class BrandImageSetting extends React.Component {
static get propTypes() {
return {
disabled: React.PropTypes.bool.isRequired
};
}
constructor(props) {
super(props);
this.handleImageChange = this.handleImageChange.bind(this);
this.handleImageSubmit = this.handleImageSubmit.bind(this);
this.state = {
brandImage: null,
brandImageExists: false,
brandImageTimestamp: Date.now(),
uploading: false,
uploadCompleted: false,
error: ''
};
}
componentWillMount() {
$.get(Client.getAdminRoute() + '/get_brand_image?t=' + this.state.brandImageTimestamp).done(() => {
this.setState({brandImageExists: true});
});
}
componentDidUpdate() {
if (this.refs.image) {
const reader = new FileReader();
const img = this.refs.image;
reader.onload = (e) => {
$(img).attr('src', e.target.result);
};
reader.readAsDataURL(this.state.brandImage);
}
}
handleImageChange() {
const element = $(this.refs.fileInput);
if (element.prop('files').length > 0) {
this.setState({
brandImage: element.prop('files')[0]
});
}
}
handleImageSubmit(e) {
e.preventDefault();
if (!this.state.brandImage) {
return;
}
if (this.state.uploading) {
return;
}
$(ReactDOM.findDOMNode(this.refs.upload)).button('loading');
this.setState({
uploading: true,
error: ''
});
Client.uploadBrandImage(
this.state.brandImage,
() => {
$(ReactDOM.findDOMNode(this.refs.upload)).button('complete');
this.setState({
brandImageExists: true,
brandImage: null,
brandImageTimestamp: Date.now(),
uploading: false
});
},
(err) => {
$(ReactDOM.findDOMNode(this.refs.upload)).button('reset');
this.setState({
uploading: false,
error: err.message
});
}
);
}
render() {
let btnPrimaryClass = 'btn';
if (this.state.brandImage) {
btnPrimaryClass += ' btn-primary';
}
let letbtnDefaultClass = 'btn';
if (!this.props.disabled) {
letbtnDefaultClass += ' btn-default';
}
let img = null;
if (this.state.brandImage) {
img = (
);
} else if (this.state.brandImageExists) {
img = (
);
} else {
img = (