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