material-ui-upload

Upload controls made in material-ui.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
material-ui-upload
36101.2.17 years ago7 years agoMinified + gzip package size for material-ui-upload in KB

Readme

material-ui-upload

Build Status
Upload controls made in material-ui using FileAPIfile-api
Components

Upload

Upload button, based on FlatButtonflat-button.
Upload button

Upload Preview

Upload with preview for images, based on Cardcard.
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

FlatButtonflat-button props can be used on this component.
For FlatButton props please see material-ui docsflat-button.

| Name | Type | Default | Description | | ---- | ---- | ------- | ----------- | | fileTypeRegex | RegExp | /.*/ | Regexp that matches allowed file names. | | onFileLoad | function | (e, file) => undefined | FileReader#onloadonload 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 Cardcard. | | onFileLoad | function | (e, file) => undefined | FileReader#onloadonload 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