Licence
MIT
Version
0.1.4
Deps
3
Size
34 kB
Vulns
0
Weekly
0
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. Also, this package use react-dnd for drag and drop sorting among preview images.
Installation
npm install react-imgfileUsage
import React, { useState } from "react";
import ImgFileInput from "react-imgfile";
function App = (props) => {
const [files, setFiles] = useState([])
const onChange = (files, pictures) => {
console.log(pictures) // Array of base64 data
setFiles([...files]) // Array of file objects for FormData
}
render() {
return (
<ImgFileInput
buttonText='Choose images'
onChange={onChange}
maxFileSize={5242880}
/>
);
}
}Available Options
| parameter | type | default | description |
|---|---|---|---|
| className | String | - | Class name for the input. |
| fileContainerStyle | Object | - | Inline styles for the file container. |
| onChange | Function | - | On change handler for the input. |
| buttonClassName | String | - | Class name for upload button. |
| buttonStyles | Object | - | Inline styles for upload button. |
| accept | String | "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|png" | Label text |
| labelStyles | Object | - | Inline styles for the label. |
| labelClass | string | - | Class name for the label |
| imgExtension | Array | ['.jpg', '.jpeg', '.gif', '.png'] | 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 | If true, only a single image can be selected |
| defaultImages | Array | - | Pre-populate with default images. |
License
MIT