How to exclude .jfif extension from image/jpeg type in accept of react-dropzone

Question

I have used: accept = { "image/jpeg": [".jpg", ".jpeg"], "image/png": [] }, but I'm having trouble with the .jfif file format, it's interpreted as .jpeg and it's being accepted and it's giving me a bug. Can anyone help me solve this problem? ‍♂️

Answer 1

You can add a custom validation function which will be called whenever a file is dropped or selected, allowing you to filter out files with unwanted extensions.

  const accept = 'image/jpeg, image/png';

  const validateFile = (file) => {
    const acceptedFormats = accept.split(',').map((format) => format.trim());

    // Check if the file format is in the accepted formats
    const isAcceptedFormat = acceptedFormats.some((format) => {
      if (format === 'image/jpeg') {
        // Exclude .jfif extension for image/jpeg
        return file.type === 'image/jpeg' && !file.name.toLowerCase().endsWith('.jfif');
      }

      return file.type === format;
    });

    return isAcceptedFormat;
  };

  const { getRootProps, getInputProps } = useDropzone({
    onDrop,
    accept,
    validator: validateFile,
  });

  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      <p>Drop files here or click to select files</p>
    </div>
  );