React dropzone with multiple maxSize prop?

JavaScript
1

Hi,

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)?

2

useDropzone takes an object.

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

You can do custom validation

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

1 Like
4

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

5

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