material-ui-upload

Upload controls made in material-ui using FileAPI

Components

Upload

Upload button, based on FlatButton.

Upload Preview

Upload with preview for images, based on Card.

Empty

With pictures

Requirements

• Your project should be configured to use CSS modules

Installation

yarn add material-ui-upload

Or with npm

npm i --save material-ui-upload

Usage example

You could see live examples providen with storybook, just make server in the root of the repository.

Upload

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