In my React app I have a form page for a book which has an option to upload a cover photo. I decided to use material-ui-dropzone (/) which works great, but I ran into one issue. The preview does not look very good when only one file is allowed.

I would like it to be centered and as big as possible, but I am really struggling. Relevant code:

const useStyles = makeStyles(() => ({
  dropZone: {
    height: '100%',
    fullWidth: 'true',
  },
  previewContainer: {
    container: 'true',
    width: '100%',
    height: '100%',
  },
  preview: {
    //width: '100%',
    //height: '100%',
    //item: 'true',
    xs: '12',
  },
  previewImg: {
    //height: '100%',
    //width: '100%',
  },
}));

const classes = useStyles();

<DropzoneArea
   acceptedFiles={['image/*']}
   dropzoneClass={classes.dropZone}
   previewGridClasses={{
      container: classes.previewContainer,
      item: classes.preview,
      image: classes.previewImg,
   }}
   dropzoneText={'Upload book cover image'}
   filesLimit={1}
   onChange={(files) => formikProps.setFieldValue('coverImage', files)}
   showAlerts={false}
/>

I have been trying a bunch of things, but so far the only way I even managed to get an actual visual effect was by adding some padding to the preview class. Any help would be very much appreciated.

In my React app I have a form page for a book which has an option to upload a cover photo. I decided to use material-ui-dropzone (https://yuvaleros.github.io/material-ui-dropzone/) which works great, but I ran into one issue. The preview does not look very good when only one file is allowed.

I would like it to be centered and as big as possible, but I am really struggling. Relevant code:

const useStyles = makeStyles(() => ({
  dropZone: {
    height: '100%',
    fullWidth: 'true',
  },
  previewContainer: {
    container: 'true',
    width: '100%',
    height: '100%',
  },
  preview: {
    //width: '100%',
    //height: '100%',
    //item: 'true',
    xs: '12',
  },
  previewImg: {
    //height: '100%',
    //width: '100%',
  },
}));

const classes = useStyles();

<DropzoneArea
   acceptedFiles={['image/*']}
   dropzoneClass={classes.dropZone}
   previewGridClasses={{
      container: classes.previewContainer,
      item: classes.preview,
      image: classes.previewImg,
   }}
   dropzoneText={'Upload book cover image'}
   filesLimit={1}
   onChange={(files) => formikProps.setFieldValue('coverImage', files)}
   showAlerts={false}
/>

I have been trying a bunch of things, but so far the only way I even managed to get an actual visual effect was by adding some padding to the preview class. Any help would be very much appreciated.

• javascript
• reactjs
• material-ui

Share Improve this question Follow asked Nov 11, 2020 at 16:28 Klaidas BespalovasKlaidas Bespalovas 12322 silver badges55 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

I ended up resolving the issue after snooping around the source code of the ponent so I thought I would post the solution here in case someone runs into this in the future. As it turns out the dropzone ponent does not actually apply the item style to the image (even though the docs say it should). I did find a way around this, you can actually provide a custom getPreviewIcon function to the ponent and you can add your style there.

              <DropzoneArea
                acceptedFiles={['image/*']}
                dropzoneClass={classes.dropZone}
                previewGridClasses={{
                  item: classes.preview,
                }}
                getPreviewIcon={(file) => {
                  if (file.file.type.split('/')[0] === 'image')
                    return (
                      <img className={classes.previewImg} role="presentation" src={file.data} />
                    );
                }}
                dropzoneText={'Upload book cover image'}
                filesLimit={1}
                onChange={(files) => formikProps.setFieldValue('coverImage', files[0])}
                showAlerts={false}
              />