UploaderControl.jsx

class UploaderControl extends React.Component {

    constructor(props) {
        super(props);
        console.log('Uploader start');   

        //state 0 - выбор файла
        //state 1 - загрузка
        this.state = { progress: 0, ButtonUploadEnable: true, _state: 0, FileInfo: {}, ResultMsg: "" };

        this.GetID = this.props.GetID;

        this.UploadClick = this.UploadClick.bind(this);
        this.CancelClick = this.CancelClick.bind(this);

        this.OnProgresseChange = this.OnProgresseChange.bind(this);
        this.OnError = this.OnError.bind(this);

        this.uploadServices = new UploadServices();
        this.uploadServices.OnProggresseChange = this.OnProgresseChange;
        //this.uploadServices.OnIDReceived = null;
        this.uploadServices.OnError = this.OnError;
    }

    UploadClick() {

        let input = this.refs.file;
        let files = input.files;


        if (files.length == 0)
            return;
        let file = files[0];

        this.setState({ ButtonUploadEnable: false, _state: 1, FileInfo: { name: file.name, size: file.size } });

        this.uploadServices.UploadFileAsync(file, this.GetID()).then(function () {
            this.setState({ ButtonUploadEnable: true, _state: 0, FileInfo: {} });
            this.props.OnItemsChange();
            input.value = "";
        }.bind(this));
    }

    CancelClick() {
        this.uploadServices.Cansel();
        this.setState({ ButtonUploadEnable: true, _state: 0, FileInfo: {} });
    }

    OnProgresseChange(Process) {
        this.setState({ progress: Process });
    }

    OnError(Msg) {
        this.setState({ progress: 0, ButtonUploadEnable: true, _state: 0, FileInfo: {}, ResultMsg: Msg });
    }



    render() {
        return (
            <div>
                <h2>Upload</h2>
                <p>
                    <input ref="file" type="file" disabled={!this.state.ButtonUploadEnable} />
                    <input type="button" disabled={!this.state.ButtonUploadEnable} onClick={this.UploadClick} value='Upload' />
                    <input type="button" disabled={this.state.ButtonUploadEnable} onClick={this.CancelClick} value='Cancel' />
                </p>

                {
                    (
                        () => {
                            if (this.state._state == 1) {
                                return (
                                    <div>
                                        <p>Прогресс {this.state.progress} %</p>
                                        <p>Выполняется загрука файла:</p>
                                        <p>Имя файла: {this.state.FileInfo.name}</p>
                                        <p>Размеры файла: {this.state.FileInfo.size}</p>
                                    </div>
                                )
                            }
                        }
                    ).bind(this)()
                }

                {
                    (
                        () => {
                            if (this.state.ResultMsg != "") {
                                return (
                                    <p>Результат: {this.state.ResultMsg}</p>
                                )
                            }
                        }
                    ).bind(this)()
                }
            </div>
        );
    }
}