Simple component for upload and validate (client side) images with preview built with React.js. This package use 'react-flip-move' for animate the file preview images.
npm install --save react-images-upload
import React from 'react';
import ImageUploader from 'react-images-upload';
class App extends React.Component {
constructor(props) {
super(props);
this.state = { pictures: [] };
this.onDrop = this.onDrop.bind(this);
}
onDrop(picture) {
this.setState({
pictures: this.state.pictures.concat(picture),
});
}
render() {
return (
<ImageUploader
withIcon={true}
buttonText='Choose images'
onChange={this.onDrop}
imgExtension={['.jpg', '.gif', '.png', '.gif']}
maxFileSize={5242880}
/>
);
}
}
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. |
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. |
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 |
Barak Cohen (baaraak0@gmail.com)
MIT