trc-client-core/src/media/FileUploadForm.jsx

The core of the TRC Client

import React from 'react';
import classname from 'classname'; 
import ProgressBar from 'bd-stampy/components/ProgressBar';

function humanFileSize(bytes) {
    var thresh = 1000;
    var units = ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
    var u = -1;

    if (bytes < thresh) {
        return bytes + ' B';    
    } 

    do {
        bytes /= thresh;
        ++u;
    } while(bytes >= thresh);
    return `${bytes.toFixed(1)} ${units[u]}`;
}

var TechnicalTagForm = React.createClass({
    displayName: 'TechnicalTagForm',
    render() {
        const {documentTag} = this.props;
        return (
            <div className={classname('FileUpload', {'is-chosenFile': this.state.files})}>
                {this.renderButton()}
                <input
                    className="FileUpload_input"
                    ref="input"
                    type="file"
                    name={this.props.name}
                    onChange={this.onChange}
                />
                {this.renderProgress()}
                {this.renderFileInformation()}
            </div>
        );
    },
    renderButton() {
        if(this.state.files) {
            return <Button className="FileUpload_button" onClick={this.onUpload}>Upload</Button>;
        }
    },
    renderProgress() {
        if(this.state.percentage !== 0) {
            return <ProgressBar className="FileUpload_progress" value={this.state.percentage} />;
        }
    },
    renderFileInformation() {
        var files = this.state.files;
        if(files) {
            return <div className="FileUpload_meta">
                <div className="FileUpload_meta_name">{files[0].name}</div>
                <div className="FileUpload_meta_size">{this.renderLoaded()}{humanFileSize(files[0].size)}</div>
                <div className="FileUpload_meta_type">{files[0].type}</div>
            </div>;
        }
    },
    renderLoaded() {
        if(this.state.loaded) {
            return humanFileSize(this.state.files[0].size * this.state.decimal) + ' / ';
        }
    }
});

module.exports = TechnicalTagForm;