application/metaproperties/file-meta-property.js

import React from 'react';
import shallowCompare from 'react-addons-shallow-compare';
import moment from 'moment';
import RaisedButton from 'material-ui/RaisedButton';

class FileMetaProperty extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = 'FileMetaProperty';

        this.state = {
            fileName: false
        };
    }

    shouldComponentUpdate(nextProps, nextState) {
        if (nextProps.value != this.props.value) {
            return true;
        }
        if (nextProps.disabled != this.props.disabled) {
            return true;
        }
        return false;
    }

    rando() {
        const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

        let str = [];
        for (let i=0; i<5; i++) {
            str.push(chars.charAt(Math.floor(Math.random() * chars.length)));
        }

        return str.join('');
    }

    handleSelectUpload(e) {
        const evt = new Event('input', {bubbles: true});
        $(this.refs.filehandle).trigger('click');
    }

    handleChange(val) {
        const propName = this.props.name;

        let fakeEvent = {
            target: {
                getAttribute: function() {
                    return propName;
                },
                value: val
            }
        };
        this.props.onChange(fakeEvent);
    }

    handleSelectFile(e) {
        if (!e.target.files.length) {
            return;
        }
        const {dispatch} = this.props;

        const file = e.target.files[0];
        let reader = new FileReader();
        let contents;
        reader.onload = (e) => {
            contents = e.target.result;

            this.handleChange.call(this, {
                'name': file.name,
                'file': contents
            });
        };

        this.setState({fileName: file.name});
        reader.readAsDataURL(file);
    }

    render() {
        const name = this.props.name ? this.props.name : 'file_' + this.rando();

        let fileName = false;
        let fileUuid = false;
        let fileExt = false;
        let fileBaseName = false;

        if (this.state.fileName) {
            fileName = this.state.fileName;
        } else if (this.props.value && this.props.value.size) {
            fileName = this.props.value.get('name');
            fileUuid = this.props.value.get('uuid');
            fileExt = this.props.value.get('extension');
            fileBaseName = this.props.value.get('base_name');
        }

        let link = false;

        return (

            <div>
                <div className='fixed-label'>{this.props.floatingLabelText}</div>
                <div className='clear-top clear-bottom'>
                    {
                        fileName
                        ? fileName
                        : (<span className='quiet'>No file selected</span>)
                    }
                </div>

                <RaisedButton
                    label='Select File'
                    onClick={this.handleSelectUpload.bind(this)}
                    primary={true}
                    />
                <input type='file' style={{display:'none'}} onChange={this.handleSelectFile.bind(this)} ref='filehandle' />
            </div>
        );
    }
}

export default FileMetaProperty;