/react-core-image-upload

a component for image to upload and crop

Primary LanguageJavaScriptMIT LicenseMIT

react-core-image-upload

npm Node Version Build Status

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 😄😄😄💐💐💐