@borisp/material-ui-upload

Upload controls made in material-ui.


Keywords
react, material, upload, preview, file, material-ui, upload-file, upload-pictures
License
MIT
Install
npm install @borisp/material-ui-upload@1.2.1

Documentation

material-ui-upload

Build Status

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 storybook-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