react-filepicker-mui · 
filepicker https://dccs-it-business-solutions.github.io/react-filepicker-mui/
Installation
You should install react-filepicker-mui with npm or yarn:
npm install @dccs/react-filepicker-mui
or
yarn add @dccs/react-filepicker-mui
This command will download and install react-filepicker-mui
Usage
Required Parameters
| Name | Type | Description |
|---|---|---|
| value | string[] |
Array of Ids from selected files |
| onChange | (newValue: string[]) => void |
gets called every time a file is: added and the uploadFile function has returned the Id removed |
| uploadFile | (file: File) => Promise<string> |
do something with the file and return an Id for it |
| getFile | (id: string) => Promise<FileMetadata> |
gets called for every Id in the value[] and should return the metadata for the file with the given Id |
No Customization
<FilePicker
value={fileIds}
onChange={ids => {
setFileIds(ids);
}}
uploadFile={(file:File)=>{
// could look like this:
string fileId = await api.uploadFile(file);
return fileId;
}}
getFile={(id: string) => {
// could look like this:
let metadata = await api.getFile(id);
return metadata;
}}
/>Custom Render Example
<FilePicker
value={fileIds}
onChange={ids => {
setFileIds(ids);
}}
uploadFile={(file:File)=>{
// could look like this:
string fileId = await api.uploadFile(file);
return fileId;
}}
getFile={(id: string) => {
// could look like this:
let metadata = await api.getFile(id);
return metadata;
}}
>
{(state, files, removeFile) => (
<div
{...state.getRootProps()}
style={{ minWIdth: 500, minHeight: 500, backgroundColor: "gray" }}
>
<input {...state.getInputProps()} />
{files.map(f => (
<ListItem key={f.id}>
<ListItemText primary={f.name} />
<ListItemSecondaryAction>
<Button
onClick={e => {
e.stopPropagation();
removeFile(f.id);
}}
>
<Typography>Delete</Typography>
</Button>
</ListItemSecondaryAction>
</ListItem>
))}
</div>
)}
</FilePicker>Contributing
License
@dccs/react-filepicker-mui is MIT licensed