Styling preview grid in material-ui-dropzone

user_11535179 0
Viewed 3623

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. enter image description here

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.

material-ui reactjs javascript
1 Answers

I ended up resolving the issue after snooping around the source code of the component so I thought I would post the solution here in case someone runs into this in the future. As it turns out the dropzone component 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 component 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}
              />
user_115351790
Related