react-images-upload
react-images-upload copied to clipboard
React input file component with images preview
Images uploader UI component
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.
Installation
npm install --save react-images-upload
Usage
Using Classes
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(pictureFiles, pictureDataURLs) {
this.setState({
pictures: this.state.pictures.concat(pictureFiles)
});
}
render() {
return (
<ImageUploader
withIcon={true}
buttonText="Choose images"
onChange={this.onDrop}
imgExtension={[".jpg", ".gif", ".png", ".gif"]}
maxFileSize={5242880}
/>
);
}
}
Using Hooks
import React, { useState } from "react";
import ImageUploader from "react-images-upload";
const App = props => {
const [pictures, setPictures] = useState([]);
const onDrop = picture => {
setPictures([...pictures, picture]);
};
return (
<ImageUploader
{...props}
withIcon={true}
onChange={onDrop}
imgExtension={[".jpg", ".gif", ".png", ".gif"]}
maxFileSize={5242880}
/>
);
};
export default App;
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, 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 |
Development
Clone the repo and run npm ci
. Start development server with npm start
.
License
MIT