reactjsdropzone

Customize DropZoneArea for material-ui-dropzone

I would like to customize the look of the DropZoneArea besides the simple dropZoneText and Icon props. I have successfully done it, but I get the following react warning Failed prop type: Invalid prop 'dropzoneText' of type 'object' supplied to 'DropzoneAreaBase', expected string.

I understand what the issue is, but I was wondering if anyone knew how to accurately customize it.

Default looks like: enter image description here

I want the following:

enter image description here

I was able to get it to work by overriding the the dropZoneText prop as follows:

<DropzoneArea
  filesLimit={1}
  showAlerts={false}
  classes={{ root: clsx([classes.dropZoneRoot, uploading ? classes.disableClick : null]) }}
  showPreviewsInDropzone={false}
  showFileNames={false}
  dropzoneClass={classes.dropZone}
  Icon={''}
  dropzoneText={
    <Box className={classes.customDropZone} px={16} py={6} display="flex" flexDirection="column" justifyContent="center" alignItems="center" gridGap={4}>
      {uploading && (
        <Box className={classes.customDropZoneLoader} display="flex" flexDirection="column" justifyContent="center" alignItems="center">
          <CircularProgress size="2rem" />
        </Box>
      )}
      <Typography variant="subtitle1">Drop your file here</Typography>
      <Typography>or</Typography>
      <Box mt={1}>
        <Button color="primary" variant="outlined" style={{ width: 125 }}>
          Select File
        </Button>
      </Box>
      <Box mt={1}>
        <Typography>
          Accepted file types: <br />
          <strong>.png, .jpg, .gif, .txt, .csv, .doc, .docx, .xls, .xlsx, .pdf</strong>
        </Typography>
      </Box>
      <Box mt={1}>
        <Typography>
          Maximum file size: <strong>20MB</strong>
        </Typography>
      </Box>
    </Box>
  }
  maxFileSize={20971520}
  acceptedFiles={[
    'application/pdf, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, image/jpeg, image/png, application/txt, text/tab-separated-values, text/csv, application/csv, text/x-csv, application/x-csv, text/comma-separated-values, text/x-comma-separated-values'
  ]}
  onChange={onFileDropped}
  onDropRejected={onFileRejected}
>                    
</DropzoneArea>

Does anyone know of a better way to do this and not get the warning? For what it's worth, it works perfectly fine, but just throws the warning in the console.

Solution

  • Unfortunately, it seems the maintainer of that repository is not capable of fixing it. https://github.com/Yuvaleros/material-ui-dropzone/issues/35 - It's a rather old repository so I doubt it would get fixed.

    If you were using Typescript, you could cast the wrapper as a string to make the DropzoneArea component happy, but the issue is with the library itself not using object / ReactNode as an expected type.

    If you really want to try and fix that, you could use an npm package like patch-package to fix it locally for your project. https://www.npmjs.com/package/patch-package