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

Installation

yarn add material-ui-upload

Or with npm

npm i --save material-ui-upload

Usage example

Upload

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

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

    render() {
        return (
            <Upload 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) => undefined	FileReader#onload event handler.

UploadPreview

Upload component props can be used on this component.

Name	Type	Default	Description
title	string	''	Title of the Card.
onFileLoad	function	(e) => undefined	FileReader#onload event handler.
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