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-uploadimportReactfrom"react";importImageUploaderfrom"react-images-upload";classAppextendsReact.Component{constructor(props){super(props);this.state={pictures: []};this.onDrop=this.onDrop.bind(this);}onDrop(pictureFiles,pictureDataURLs){this.setState({pictures: this.state.pictures.concat(pictureFiles)});}render(){return(<ImageUploaderwithIcon={true}buttonText="Choose images"onChange={this.onDrop}imgExtension={[".jpg",".gif",".png",".gif"]}maxFileSize={5242880}/>);}}importReact,{useState}from"react";importImageUploaderfrom"react-images-upload";constApp=props=>{const[pictures,setPictures]=useState([]);constonDrop=picture=>{setPictures([...pictures,picture]);};return(<ImageUploader{...props}withIcon={true}onChange={onDrop}imgExtension={[".jpg",".gif",".png",".gif"]}maxFileSize={5242880}/>);};exportdefaultApp;| 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, png | Label text |
| 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 |
| singleImage | Boolean | false | Upload one single image |
Clone the repo and run npm ci. Start development server with npm start.
MIT