Demo
Images uploader UI component
Simple component for browsing, uploading and validating (client side) images with preview built with React.js. This package uses 'react-flip-move' for animating the preview image files. This is a modified version of 'react-images-upload' from JakeHartnell/react-images-upload.
Installation
npm install --save react-images-browse
Usage
;; Component { superprops; thisstate = pictures: ; thisonDrop = thisonDrop; } { this; } { return <ImageUploader withIcon=true buttonText='Choose images' onChange=thisonDrop imgExtension='.jpg' '.gif' '.png' '.gif' maxFileSize=5242880 /> ; }
Available Options
parameter | type | default | description |
---|---|---|---|
className | String | - | Class name for the input. |
onChange | Function | - | On change handler for the input. |
buttonClassName | String | - | Class name for upload button. |
buttonStyles | Object | - | Inline styles for upload button. |
withPreview | Boolean | false | Show preview of selected images. |
defaultImages | Array | ['imgUrl1', 'imgUrl2'] | Pre-populate with default images. |
accept | String | "accept=image/*" | Accept attribute for file input. |
name | String | - | Input name. |
withIcon | Boolean | true | If true, show upload icon on top |
buttonText | String | 'Choose images' | The text that display in the button. |
buttonType | String | 'submit' | The value of the button's "type" attribute. |
withLabel | Boolean | true | Show instruction label |
label | String | 'Max file size: 5mb, accepted: jpg | gif |
labelStyles | Object | - | Inline styles for the label. |
labelClass | string | - | Class name for the label |
imgExtension | Array | ['.jpg', '.gif', '.png', '.gif'] | Supported image extension (will use in the image validation). |
maxFileSize | Number | 5242880 | Max image size. |
fileSizeError | String | " file size is too big" | Label for file size error message. |
fileTypeError | String | " is not supported file extension" | Label for file extension error message. |
errorClass | String | - | Class for error messages |
errorStyle | Object | - | Inline styles for errors |
Development
Make sure you have yarn installed. Clone the repo and run yarn
.
License
MIT