Custom validators

react-dropzone provides some simple validation out of the box like accept, minSize and maxSize but it lacks rejection reason (#257 and #319) so it’s impossible to react to this rejection without the duplicating the validations in the user’s component’s code.

I have been thinking about implementing some kind of custom validator functions that you could then compose. Each such validator function should have a generic API. Something like this:

import { validate, assertMaxFileSize, assertMinFileSize, asserFileType } from 'react-dropzone'

function onValidate(files) {
  const { acceptedFiles, rejectedFiles } = validate(assertMaxFileSize, assertMinFileSize, asserFileType)(files)
  return [ acceptedFiles, rejectedFiles ]
}

const MyDropZone = (props) => {
  return <Dropzone onValidate={onValidate} />
}

This would allow create custom validators and react to rejections appropriately in the UI.

Thoughts?

[josephecombs]

here’s some boilerplate I wrote to validate image dimensions in case anyone needs it:

const onDrop = (accepted, rejected) => {
  let errors = [];

  if (rejected.length > 0) {
    errors.push('Image is over 10 MB and is therefore rejected.');
  } else {
    if (accepted[0].type !== 'image/jpeg') {
      errors.push('This image is not a jpg and is therefore rejected.');
    } else {
      var acceptedImg = accepted[0];
      var image  = new Image();
      image.addEventListener('load', function () {
        if (image.width !== 2500) {
          errors.push('This image must be exactly 2500 pixels wide.');
        } else if (image.height !== 3000) {
          errors.push('This image must be exactly 3000 pixels wide.');
        }

        // display errors or do success thing
        if (errors.length > 0) {
          alert(errors.join(', '));
        } else {
          alert('client side validations passed');
        }
      }.bind(this));
      image.src = acceptedImg.preview;
    }
  }
};

[josephecombs]

I’ve updated my answer using FileReader, sorry for some nastiness in here:

const onDrop = (acceptedFiles, rejected, dropZoneRef) => {
  acceptedFiles.forEach((acceptedImg) => {
    const reader = new FileReader();
    reader.onload = (e) => {
      const binaryUrl = e.target.result;
      let errors = [];

      if (acceptedImg.type !== 'image/jpeg') {
        errors.push('This image is not a jpg and is therefore rejected.');
      }
      if (acceptedImg.size > 10000000) {
        errors.push('This image is over 10MB and is therefore rejected.');
      }
      const image  = new Image();

      image.addEventListener('load', () => {
        if (image.width !== 2500) {
          errors.push('This image must be exactly 2500 pixels wide.');
        } else if (image.height !== 3000) {
          errors.push('This image must be exactly 3000 pixels tall.');
        }
        // display errors or do success thing
        if (errors.length > 0) {
          alert(errors.join('\n'));
          PubSub.publish('IMAGE_ATTACH_FAILURE', { src: image.src, acceptedImg: acceptedImg });
        } else {
          PubSub.publish('IMAGE_ATTACH_SUCCESS', { src: image.src, acceptedImg: acceptedImg });
        }
      });

      image.src = binaryUrl;
    };
    image = reader.readAsDataURL(acceptedImg);
  });
};