import React, {Component} from 'react';
import Upload from 'material-ui-upload/Upload';

class MyComponent extends Component {
    onFileLoad = (e, file) => console.log(e.target.result, file.name);

    render() {
        return (
            <Upload label="Add" onFileLoad={this.onFileLoad}/>
        );
    }
}

UploadPreview

import React, {Component} from 'react';
import UploadPreview from 'material-ui-upload/UploadPreview';

class MyComponent extends Component {
    constructor() {
        super();
        this.state = {
            pictures: {}
        };
    }

    onChange = (pictures) => this.setState({pictures});

    render() {
        return (
            <UploadPreview
              title="Picture"
              label="Add"
              initialItems={this.state.pictures}
              onChange={this.onChange}
              />
        );
    }
}

Properties

Upload

FlatButton props can be used on this component.

For FlatButton props please see material-ui docs.

Name	Type	Default	Description
fileTypeRegex	`RegExp`	`/.*/`	Regexp that matches allowed file names.
onFileLoad	`function`	`(e, file) => undefined`	FileReader#onload event handler which receives a `FileReader` event and original file object.
buttonControl	`function`	`material-ui/FlatButton`	Control constructor to use as upload button.

UploadPreview

Upload component props can be used on this component.

Name	Type	Default	Description
title	`string`	`''`	Title of the Card.
onFileLoad	`function`	`(e, file) => undefined`	FileReader#onload event handler which receives a `FileReader` event and original file object.
label	`string`	`Upload`	Upload button label.
onChange	`function`	`(items) => undefined`	When state of the component changes(file added, removed, removed all) this function will be fired with a hash of items as argument(each item key is a sha1 of the base64 dataURI this may change to 'hash of a file content' in the future).
initialItems	`object`	`{}`	Predefined items.

License

MIT