130 lines
3.4 KiB
Markdown
130 lines
3.4 KiB
Markdown
material-ui-upload
|
|
----------------------
|
|
|
|
[](https://travis-ci.org/corpix/material-ui-upload)
|
|
|
|
Upload controls made in material-ui using [FileAPI][file-api]
|
|
|
|
# Components
|
|
|
|
## Upload
|
|
|
|
Upload button, based on [FlatButton][flat-button].
|
|
|
|
|
|
|
|
## Upload Preview
|
|
|
|
Upload with preview for images, based on [Card][card].
|
|
|
|
> Empty
|
|
|
|
|
|
|
|
> With pictures
|
|
|
|
|
|
|
|
# Requirements
|
|
|
|
- Your project should be configured to use CSS modules
|
|
|
|
# Installation
|
|
|
|
``` shell
|
|
yarn add material-ui-upload
|
|
```
|
|
|
|
Or with npm
|
|
|
|
```shell
|
|
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
|
|
|
|
``` jsx
|
|
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
|
|
|
|
``` jsx
|
|
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][flat-button] props can be used on this component.
|
|
|
|
> For FlatButton props please see [material-ui docs][flat-button].
|
|
|
|
| Name | Type | Default | Description |
|
|
| ---- | ---- | ------- | ----------- |
|
|
| fileTypeRegex | `RegExp` | `/.*/` | Regexp that matches allowed file names. |
|
|
| onFileLoad | `function` | `(e, file) => undefined` | [FileReader#onload][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][card]. |
|
|
| onFileLoad | `function` | `(e, file) => undefined` | [FileReader#onload][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](/LICENSE)
|
|
|
|
|
|
[card]: http://www.material-ui.com/#/components/card
|
|
[flat-button]: http://www.material-ui.com/#/components/flat-button
|
|
[file-api]: https://developer.mozilla.org/en-US/docs/Web/API/File
|
|
[onload]: https://developer.mozilla.org/ru/docs/Web/API/FileReader/onload
|