Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/corpix/material-ui-upload
Upload controls made in material-ui using FileAPI
https://github.com/corpix/material-ui-upload
material-ui react upload-file upload-pictures
Last synced: 25 days ago
JSON representation
Upload controls made in material-ui using FileAPI
- Host: GitHub
- URL: https://github.com/corpix/material-ui-upload
- Owner: corpix
- License: mit
- Archived: true
- Created: 2016-12-12T17:56:12.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2020-03-15T10:47:03.000Z (over 4 years ago)
- Last Synced: 2024-11-11T18:53:03.537Z (about 1 month ago)
- Topics: material-ui, react, upload-file, upload-pictures
- Language: JavaScript
- Homepage:
- Size: 1.02 MB
- Stars: 36
- Watchers: 7
- Forks: 24
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-material-ui - Material-UI Upload - Upload controls made in Material-UI using FileAPI. (Components)
README
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 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 (
);
}
}
```
## 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 (
);
}
}
```
# 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