Validating files and disabling preview

How it’s supposed to validate, for example, file size? Or separate valid files from invalid ones?

How about introducing smth like validate callback? We can pass each dropped file there, split them by returned result and then pass corresponding arrays to onDropAccepted and onDropRejected.

---

Also, it’s said “We might want to disable the preview creation to support big files”, but there is no way to detect whether file is actually “big”. So we should either disable previews at all, or create previews for everything. Maybe, it’s worth to add another function to check whether preview for particular file should be created?

---

And, shouldn’t it be this.props.disablePreview here?

[MichaelLeeHobbs]

Here’s how I validated for anyone finding this.

  const Preview = (props) => (
    (props.file) ?
      <div>
        <img style={{width: '196px', height: '196px'}} src={props.file.preview}/>
      </div> : <div>{props.text}</div>
  );

  const TWO_MiB = 2097152;
  export class ImageDropZone extends React.Component {
    constructor(props) {
      super(props);
      this.maxSize = props.maxSize ? props.maxSize : TWO_MiB;
      this.maxWidth = props.maxWidth ? props.maxWidth : 3000;
      this.maxHeight = props.maxHeight ? props.maxHeight : 3000;
      this.text = props.text ? props.text : `Drop image here. Max ${this.maxSize} and ${this.maxWidth}px by ${this.maxHeight}px`;

      this.state = {
        file: null
      }
    }

    onDrop(files) {
      if (files.length === 0) {
        Bert.alert('No files found!', 'danger');
        return;
      }
      let file = files[0];

      if (file.size > this.maxSize) {
        Bert.alert(`File: ${file.name} size: ${file.size} > max: ${this.maxSize} bytes`, 'danger');
        return;
      }

      var image = new Image();
      image.addEventListener("load", () => {
        if (image.width > this.maxWidth) {
          Bert.alert(`File: ${file.name} width: ${image.width} > max: ${this.maxWidth}px`, 'danger');
          return;
        }
        if (image.height > this.maxHeight) {
          Bert.alert(`File: ${file.name} width: ${image.height} > max: ${this.maxHeight}px`, 'danger');
          return;
        }
        this.setState({
          file: file
        });
      });
      image.src = window.URL.createObjectURL(file);
    }

    render() {
      return (
        <Dropzone multiple={false} onDrop={this.onDrop.bind(this)} accept="image/*">
          <Preview files={this.state.files} text={this.text}/>
        </Dropzone>
      );
    }
  }

[YannPl]

is this issue abandoned, I would like to have this option too =)