Bare-bones file picker for react with no dependencies (other than react >= 16.8
) or bells and whistles.
What it does - it allows you to select multiple files and order and / or delete them. That's it.
You can also set a limit on the number of files user can select and the file types.
This package will not install react
for you. It assumes you will add react dependency
in your package.json
along-side react-file-input
. Example screenshot:
Assuming you know how to write a React app:
import FileInput from "@siddjain/react-file-input";
export default function App() {
return (
<div className="App">
<FileInput maxFileCount={3} accept=".png,.jpg,.jpeg" />
</div>
);
}
FileInput
takes following optional inputs:
onChange
: an event handler that is called whenever the file list changes (addition, deletion or change in order of items in the list)maxFileSize
: a number. units: bytes. If user selects a file whose size is greater thanmaxFileSize
a warning symbol is displayed. The file is still selected and added to list of files.accept
: same as accept. a string that defines the file types the file input should accept.value
: this is useful if you will be usingFileInput
in a multi-step (multi-page) form where user can go back and forth. An array ofFile
objects to initializeFileInput
's list of files.