react-core-image-upload
Version:
a component for image to upload and crop
187 lines (161 loc) • 4.6 kB
Markdown
# react-core-image-upload
[]()
[](https://travis-ci.org/Vanthink-UED/react-core-image-upload)
<img src="http://img1.vued.vanthink.cn/vued4196249d82e15d09c66af279cc1818eb.jpeg" width="320" />
A component for image to upload and crop
[Document](http://vanthink-ued.github.io/react-core-image-upload/index.html#/en/home)
[中文文档](http://vanthink-ued.github.io/react-core-image-upload/index.html#/cn/home)
### Install
Use Npm
```bash
npm install react-core-image-upload --save
```
Use yarn
``` bash
yarn add react-core-image-upload
```
### How to use
``` js
import React from 'react';
import ReactCoreImageUpload from 'react-core-image-upload';
let App = React.createClass({
//...
render() {
return(
<div>
<ReactCoreImageUpload
text="Upload Your Image"
className='pure-button'
inputOfFile="files"
url="./api/upload.php"
imageUploaded={this.handleRes}>
</ReactCoreImageUpload>
</div>
);
},
handleRes(res) {
this.setState({
// handle response
})
}
})
```
### Run demo
``` bash
cd __sites_ && npm run start
```
[http://localhost:9000/webpack-dev-server/demo/index.html](http://localhost:9000/webpack-dev-server/demo/index.html)
[Demos](http://vanthink-ued.github.io/react-core-image-upload/index.html)
### Props
<table class="m-table bordered">
<thead>
<tr>
<th>Props</th>
<th align="left">Data Type</th>
<th>Example</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr>
<td>url</td>
<td align="left">String</td>
<td>'/crop.php'</td>
<td>Your server api</td>
</tr>
<tr>
<td>text</td>
<td align="left">String</td>
<td>'Upload Image'</td>
<td>The text of your uploading button</td>
</tr>
<tr>
<td>inputOfFile</td>
<td align="left">String </td>
<td> 'file'</td>
<td>Yout input[file] name</td>
</tr>
<tr>
<td>extensions</td>
<td align="left">String</td>
<td>'png,jpg,gif'</td>
<td>Limit the image type</td>
</tr>
<tr>
<td>crop</td>
<td align="left">Boolean</td>
<td>'server'</td>
<td>Crop image option</td>
</tr>
<tr>
<td>cropRatio</td>
<td align="left">String</td>
<td>'1:1'</td>
<td>The cropped image shape(set 'auto' not limit the crop shape)</td>
</tr>
<tr>
<td>cropBtn</td>
<td align="left">Object</td>
<td>{ok:'Save','cancel':'Give Up'}</td>
<td>The Text of cropping button text</td>
</tr>
<tr>
<td>maxFileSize</td>
<td align="left">Number</td>
<td>10485760(10M)</td>
<td>Limit the size of the file</td>
</tr>
<tr>
<td>maxWidth</td>
<td align="left">Number</td>
<td>150</td>
<td>The maximum width of cropped image </td>
</tr>
<tr>
<td>maxheight</td>
<td align="left">Number</td>
<td>150</td>
<td>限制图片的最大高度</td>
</tr>
<tr>
<td>inputAccept</td>
<td align="left">string</td>
<td>'image/*' / 'image/jpg,image/jpeg,image/png'</td>
<td>the input[file] accept</td>
</tr>
<tr>
<td>compress</td>
<td align="left">Number</td>
<td>50</td>
<td>Set the quality of compressed image</td>
</tr>
<tr>
<td>isXhr</td>
<td align="left">Boolean</td>
<td>true</td>
<td>IF cancel ajax uploading</td>
</tr>
<tr>
<td>headers</td>
<td align="left">Object</td>
<td>{auth: xxxxx}</td>
<td>Set customed header when ajax uploading</td>
</tr>
<tr>
<td>data</td>
<td align="left">Object</td>
<td>{auth: xxxxx}</td>
<td>Set customed data when ajax posting server</td>
</tr>
</tbody>
</table>
### Events
+ `imageUploaded`: when you finish your image uploading
+ `imageChanged`: when the input file has changed
+ `imageUploading` when your image is uploading
+ `errorHandle` when image uploading meet some error
[Demo](http://vanthink-ued.github.io/react-core-image-upload/upload.html)
[Demo Source](https://github.com/Vanthink-UED/react-core-image-upload/blob/master/src/components/contents.js)
### Contributions
Your contributions and suggestions are welcome 😄😄😄💐💐💐