components/common/UploadAssetsComponent.js

UploadAssetsComponent.js

import React, { Component } from 'react';
import { Row, Grid, Col } from 'react-bootstrap';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import RaisedButton from 'material-ui/RaisedButton';
import TextField from 'material-ui/TextField';
import FontIcon from 'material-ui/FontIcon';
import {List, ListItem} from 'material-ui/List';
import IconButton from 'material-ui/IconButton';
import moment from 'moment';

const ALLOWED_FILES = ['png', 'jpg', 'jpge', 'jpeg', 'doc', 'pdf', 'docx', 'xlsx', 'xls', 'csv', 'gif'];
const IMAGE = ['png', 'jpg', 'jpge', 'gif', 'jpeg'];

export default class UploadAssetsComponent extends Component {
    inputFile = null;
    state = {
        modal:{
            open:false,
            title:'',
            description:'',
        },
        assetModalOpen: false,
        assetModalTitle:null,
        assetType: null,
        assetUrl:null,
        assetName: null,
        assetCreatedDt:null,
        assetId:null,
        uploadAsset:{
            open:false,
            data:null,
            name:null,
            type:null,
            description:null,
        }
    };
    onUploadClick = () =>{
        this.inputFile.click();
    }
    onFileChange = (selectorFiles) => {
        const reader = new FileReader();
        var file = selectorFiles[0];
        reader.onload = (upload) => {
            const type = file.type.split('/');
            if (ALLOWED_FILES.indexOf(type[1]) >= 0){
                this.setState({
                    uploadAsset: {
                        open: true,
                        data: upload.target.result,
                        name: file.name,
                        type: type[1],
                    }
                });
            }
            else{
                this.setState({modal: {
                    open: true,
                    title:'',
                    description:'',
                }});
            }
        };

        reader.readAsDataURL(file);
    }
    onClickAsset = (asset) => {
        this.setState({
            assetModalOpen: true,
            assetModalTitle: asset.name,
            assetType: asset.type,
            assetName: asset.name,
            assetUrl: asset.url,
            assetCreatedDt: moment(asset.created_dt).format('YYYY-MM-DD HH:I:SS').toString(),
            assetId: asset.id,
        });
    }
    deleteAsset = (assetId) => {
        this.props.onDeleteAsset(this.props.transactionId, assetId);
        this.setState({assetModalOpen: false});
    }
    uploadAsset = () => {
        this.setState({uploadAsset: {open:false}});
        this.props.onUploadAssets(this.props.transactionId, [{
            data: this.state.uploadAsset.data,
            name: this.state.uploadAsset.name,
        }]);
    }
    onChangeAssetDescription = (name) => {
        let prevState = this.state.uploadAsset;
        this.setState({uploadAsset:{...prevState, name}})
    }
    render () {
        return (
                <Row>
                    <Dialog
                        open={this.state.modal.open}
                        onRequestClose={() => {this.setState({modal:{open:false}})}}
                        actions={[
                            <RaisedButton label='Entendido' onClick={() => {this.setState({modal:{open:false}})}}></RaisedButton>
                        ]}
                    >
                            <h4>Formato inválido</h4>
                            <p>Formatos permitidos  </p>
                            <label>{ALLOWED_FILES.join(', ')}</label>
                    </Dialog>

                    <Dialog
                        open={this.state.uploadAsset.open}
                        onRequestClose={() => {this.setState({uploadAsset:{open:false}})}}
                        actions={[
                            <RaisedButton label='Cerrar' onClick={() => {this.setState({uploadAsset: {open:false}})}}></RaisedButton>,
                            <RaisedButton label='Subir' primary={true} onClick={this.uploadAsset}></RaisedButton>
                        ]}
                    >
                            <h4>Nuevo documento</h4>
                            <Grid>
                                <Row>
                                    <TextField onChange={(event, input) => this.onChangeAssetDescription(input.value)} floatingLabelText='Descripción' defaultValue={this.state.uploadAsset.name} />
                                </Row>
                                    {
                                        IMAGE.indexOf(this.state.uploadAsset.type) >= 0
                                        ?
                                            <Row>
                                                <a href={this.state.uploadAsset.data} target='_blank'><img src={this.state.uploadAsset.data} height="200"/></a>
                                            </Row>
                                        :
                                            <Row>
                                                <label>{this.state.uploadAsset.name}</label>
                                            </Row>
                                    }
                            </Grid>
                    </Dialog>

                    <Dialog
                        style={{padding: 10}}
                        open={this.state.assetModalOpen}
                        onRequestClose={() => {this.setState({assetModalOpen: false})}}
                        actions={[
                            <RaisedButton label="Eliminar" primary={true} onClick={() => {this.deleteAsset(this.state.assetId)}} ></RaisedButton>,
                            <RaisedButton label='Cerrar' onClick={() => {this.setState({assetModalOpen: false})}}></RaisedButton>
                        ]}
                    >
                            <h4>Documento: {this.state.assetModalTitle}</h4>
                            <Grid>
                                <Row>
                                    <label>Creado el: {this.state.assetCreatedDt}</label>
                                </Row>
                                    {
                                        IMAGE.indexOf(this.state.assetType) >= 0
                                        ?
                                            <Row>
                                                <a href={this.state.assetUrl} target='_blank'><img src={this.state.assetUrl} height="200"/></a>
                                            </Row>
                                        :
                                            <Row>
                                                <FontIcon className="muidocs-icon-action-home" style={{marginRight:10}}/><a target="_blank" href={this.state.assetUrl}>{this.state.assetName}</a>
                                            </Row>
                                    }
                            </Grid>
                    </Dialog>
                    <Row>
                        <Col>
                            <IconButton onClick={this.onUploadClick}>
                                <FontIcon className="material-icons">add</FontIcon>
                            </IconButton>
                            <input style={{display:'none'}} hidden ref={input => this.inputFile = input} type="file" onChange={ (e) => this.onFileChange(e.target.files) } />
                        </Col>
                        <Col>
                            <List>
                                {this.props.assets.map((asset) => {
                                    return  <ListItem key={asset.id} onClick={() => this.onClickAsset(asset)} primaryText={asset.name} />
                                })}
                            </List>
                        </Col>
                    </Row>
                </Row>
        );
    }
}