Simple way to manage your file states
const fileComponent = () => {
const useFileConfig = {
allowedExtensions: ["jpg", "png"],
maxSizeFile: 9776799,
};
const { files, handleChange, resetState, errors } = useFile(useFileConfig);
return (
<>
<input
name={"name"}
type="file"
onChange={handleChange}
multiple={true}
/>
<button onClick={() => resetState()}>erase</button>
</>
} - All the
coderequired to get started - Images of what it should look like
install npm and bower packages
$ npm install react-use-files
| Prop | Type | Description |
|---|---|---|
| allowedExtensions | String | Allowed Extensions |
| maxSizeFile | Integer | Max Size allowed per file in KB |
const { files, handleChange, resetState, errors } =
useFile(configuration);Files : array
State with the files.
handleChange: (<htmlFormEvent>) => void
Input file change event handler. This will update the files state
resetState: () => void
This will erase all the data inside files state
erros:array
State with the files errors