Home Reference Source Repository

src/material/FileUploadField.js

import React from 'react';
import PropTypes from 'prop-types';

import FlatButton from 'material-ui/FlatButton';

/**
 * @desc
 * File upload button.
 *
 * @example
 * handleUpload = (files) => {
 *     uploadFiles(files.map((file) => {
 *         return {file: file, name: `prefix-${file.name}`};
 *     }));
 * }
 *
 * <FieldUploadField
 *     label="Vedlegg"
 *     multiple={true}
 *     onFile={this.handleUpload}
 * />
 */
class FileUploadField extends React.Component {
    /**
     * @type {Object}
     * @property {string} label Button label.
     * @property {boolean} multiple Accept multiple files.
     * @property {boolean} disabled Disable field.
     * @property {string} accept Accept string to input field.
     * @property {function(files: File[]):} onFile Callback when file(s) are selected.
     */
    static propTypes = {
        label: PropTypes.string.isRequired,
        onFile: PropTypes.func,
        multiple: PropTypes.bool,
        accept: PropTypes.string,
        disabled: PropTypes.bool,
    };

    /**
     * @type {Object}
     */
    static defaultProps = {
        label: 'Last opp',
        multiple: false,
        accept: undefined,
        disabled: false,
        onFile: () => undefined,
    };

    /**
     * @type {function}
     */
    handleChange = (e) => {
        const filelist = e.target.files && e.target.files.length && e.target.files;
        const files = [];
        if (files) {
            for (var i=0; i<filelist.length; i++) {
                files.push(filelist[i]);
            }
        }
        this.props.onFile(files);
    }

    /**
     * @return {Node}
     */
    render() {
        const { label, onFile, multiple, accept, disabled, ...other } = this.props;
        return (
            <FlatButton
                containerElement='label'
                label={label}
                disabled={disabled}
                {...other}
            >
                <input
                    type="file"
                    style={{
                        opacity: 0,
                        position: 'absolute',
                        top: 0,
                        left: 0,
                        right: 0,
                        bottom: 0,
                    }}
                    onChange={this.handleChange}
                    multiple={multiple}
                    accept={accept}
                    disabled={disabled}
                />
            </FlatButton>
        );
    }
}

export default FileUploadField;