Material-UI DropZone "getFileAddedMessage" handler returning multiple file names in a single string

user_3446256 0
Viewed 2935

I am using Material UI dropzone. https://yuvaleros.github.io/material-ui-dropzone/. I am able to drop multiple files at a time. But the component is returning all file names combined in a string on the snack bar alerts. I want to have separate snack bar alerts for each file when uploading multiple files.

any suggestions or thoughts would be helpful.

dropzone react-dropzone material-ui reactjs javascript
2 Answers

Unfortunately the Material UI Dropzone library doesn't give you access to have multiple snack bar alerts, but you can achieve this using the onDrop property and a customized snackbar library (you can use the one from the material example - at the bottom of the snackbars page there is an example on using the notistack lib: https://material-ui.com/components/snackbars/).

A few notes:

  1. You need to remove the getFileAddedMessage method (you are not going to use it).
  2. You need to set showAlerts to false (because you manage the alerts manually and not using the Material UI Dropzone lib.

Here is an example of the DropzoneArea:

<DropzoneArea
    acceptedFiles={["image/*", "video/*", "application/*"]}
    onChange={this.handleChange.bind(this)}
    showFileNames
    filesLimit={20}
    showAlerts={false}
    onDrop={e => {
      e.forEach(item => this.props.enqueueSnackbar(item.name));
    }}
/>

You can see a working example here: https://codesandbox.io/s/mui-material-dropzone-multiple-snackbars-54rij?file=/src/index.js

user_50375510

You need to use the alertSnackbarProps prop

like this: <DropzoneArea showAlerts={true} alertSnackbarProps={{anchorOrigin:{ vertical: 'bottom', horizontal: 'center' }}} />

Admin1
Related