Awesome

material-ui-upload

Upload controls made in material-ui using FileAPI

Components

Upload

Upload button, based on FlatButton.

Upload button

Upload Preview

Upload with preview for images, based on Card.

Empty

Upload preview

With pictures

Upload preview

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