kasra-co / react-image-select-tool

A react component for image selection, and returns base64 for further use.

react-image-select-tool

A react component for selecting images. This component returns a base64 Image.

##Usage

import ImageFileSelector from "react-image-select-component";

<ImageFileSelector
    ref="imageFileSelector"
    onSelect={this.selectImage} //required
    onRemoveImage={this.onRemoveImage}
    onInvalidImage={this.onInvalidImage}  //required
    maxImageFileSize={this.maxImageFileSize}
    notImage={labels.errors.notImage}
    imageTooLarge={labels.errors.imageTooLarge}
    imageTooSmall={labels.errors.imageTooSmall}
    minSize={this.props.size}/>

###Props onSelect(function) - This receives the file selected(basically an object with the filename, date...) and it returns a base64 image and the file object it self.

For example
 async selectImage(imageBase64, imageFile) {
    //imageBase64 - base64 file
    //imageFile - Object of file selected
 }

onInvalidImage(function) - If an error occures, it recives the error message and sends it back

For example
  onInvalidImage(error) {
		//display error message
	}

notImage, imageTooLarge, && imageTooSmall (string) - These are props containing error messages error messages

 For example
	notImage: 'Please upload an image',
	imageTooLarge: 'This image is too large',
	imageTooSmall: 'This image is smaller than the required file image pixel size'

A usage example can be found here: Usage