React dropzone with multiple maxSize prop?


I am curious is it possible for react dropzone to have multiple maxSize based on different filetypes.

For example, is it possible to set a maxSize of 2MB for image/jpeg, and 1MB for image/png in a single dropzone?

I have tried doing something like

const {acceptedFiles, getRootProps, getInputProps} = useDropzone({
    fileType=".jpeg, .jpg, .png"
    maxSize={ isJpegType ? 2097152 : 1048576 }

but it doesn’t seems to work… Is it even possible, or do I need to implement a manual check during the form submission (ie. onSubmit verification)?

useDropzone takes an object.

const { acceptedFiles, getRootProps, getInputProps } = useDropzone({
  fileType: ".jpeg, .jpg, .png",
  maxSize: isJpegType ? 2097152 : 1048576

You can do custom validation

This seems to work, although it’s a bit of a pain to test.

1 Like

Thanks for the sample code.
I will take a look and learn from there.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.