react-core-image-upload

A component for image to upload and crop

Document

中文文档

Install

Use Npm

npm install react-core-image-upload --save

Use yarn

yarn add react-core-image-upload

How to use

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

cd __sites_ && npm run start

http://localhost:9000/webpack-dev-server/demo/index.html

Demos

Props

Props	Data Type	Example	Details
url	String	'/crop.php'	Your server api
text	String	'Upload Image'	The text of your uploading button
inputOfFile	String	'file'	Yout input[file] name
extensions	String	'png,jpg,gif'	Limit the image type
crop	Boolean	'server'	Crop image option
cropRatio	String	'1:1'	The cropped image shape(set 'auto' not limit the crop shape)
cropBtn	Object	{ok:'Save','cancel':'Give Up'}	The Text of cropping button text
maxFileSize	Number	10485760(10M)	Limit the size of the file
maxWidth	Number	150	The maximum width of cropped image
maxheight	Number	150	限制图片的最大高度
inputAccept	string	'image/*' / 'image/jpg,image/jpeg,image/png'	the input[file] accept
compress	Number	50	Set the quality of compressed image
isXhr	Boolean	true	IF cancel ajax uploading
headers	Object	{auth: xxxxx}	Set customed header when ajax uploading
data	Object	{auth: xxxxx}	Set customed data when ajax posting server

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

Demo Source

Contributions

Your contributions and suggestions are welcome 😄😄😄💐💐💐