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 {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,
};
/**
* @type {Object}
*/
static defaultProps = {
label: 'Last opp',
multiple: false,
accept: undefined,
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, ...other } = this.props;
return (
<FlatButton
containerElement='label'
label={label}
{...other}
>
<input
type="file"
style={{
opacity: 0,
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
onChange={this.handleChange}
multiple={multiple}
accept={accept}
/>
</FlatButton>
);
}
}
export default FileUploadField;