UploaderControl.jsx

import React from 'react';
import { Button, InputGroup, FormControl, ProgressBar, Card, Table } from 'react-bootstrap'

import Notification from '../../../Tools/Notification'

import UploadServices from '../../../Services/UploadServices'

import BaseControl from '../../BaseControl.jsx'


export default class UploaderControl extends BaseControl {

    constructor(props) {
        super(props, "UploaderControl");  

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


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

    UploadClick() {

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


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

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

        this.uploadServices.UploadFileAsync(
            file,
            this.GlobalState.MainExplorer.ID
        ).then(
            function () {
                Notification.MesOk('Complete', 'Upload');
                input.value = "";

                this.setState({
                    _state: 0,
                    FileInfo: {}
                });
                this.EventRegister.EventAction(this.GlobalState.MainExplorer.ChangeEvent);                
            }.bind(this),
            function (error_data) {
                Notification.MesEr(error_data.ResMessage, "Upload");

                this.setState({
                    progress: 0,
                    _state: 0,
                    FileInfo: {}
                });
            }.bind(this)
        );
    }

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

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


    render() {
        return (
            <div className="jumbotron">
                <h3>Загрузка файлов</h3>

                <InputGroup>
                    <FormControl ref="file" type="file" disabled={this.state._state !== 0}/>
                    <InputGroup.Append>
                        <Button disabled={this.state._state !== 0} onClick={this.UploadClick} variant="outline-success">Загрузить</Button>
                        <Button disabled={this.state._state !== 1} onClick={this.CancelClick} variant="outline-danger">Отмена</Button>
                    </InputGroup.Append>
                </InputGroup>

                {this.state._state == 1
                    ?
                    <div>
                        <Card>                            
                            <Card.Body>
                                <Card.Title>Выполняется загрука файлов</Card.Title>
                                <Table bordered size="sm">
                                    <thead>
                                        <tr>
                                            <th>Имя</th>
                                            <th>Размер</th>
                                            <th>Прогресс</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>{this.state.FileInfo.name}</td>
                                            <td>{this.state.FileInfo.size}</td>
                                            <td>
                                                <ProgressBar now={this.state.progress} label={`${this.state.progress}%`} />
                                                {this.state.UploadedSize}
                                            </td>
                                        </tr>
                                    </tbody>
                                </Table>
                            </Card.Body>
                        </Card>
                    </div>
                    : ""
                }

                { /* this.state.ResultMsg != ""
                    ? <p>Результат: {this.state.ResultMsg}</p>
                    : null                    
                  */
                }

            </div>
        );
    }
}