react-filepicker-mui · !travis build !npm version

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

$3

| 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 | do something with the file and return an Id for it |
| getFile | (id: string) => Promise | gets called for every Id in the value[] and should return the metadata for the file with the given Id |

$3

``javascript
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;
}}
/>
`

$3

`javascript
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) => (

{...state.getRootProps()}
style={{ minWIdth: 500, minHeight: 500, backgroundColor: "gray" }}
>

{files.map(f => (



onClick={e => {
e.stopPropagation();
removeFile(f.id);
}}
>
Delete



))}

)}

``

Contributing

$3

@dccs/react-filepicker-mui is MIT licensed