How to limit the maximum files chosen when using multiple file input in Reactjs?

Question

I want to limit the maximum upload of files while choosing a file in ReactJS. I'm not sure how to handle this. I tried with some solution but it did not work for me.

<input name="eventUpload" type="file" onChange={this.uploadMultipleFiles} multiple className="form-control-file" />

Answer 1

You can do it with some simple Javascript conditional check.

const MAX_LENGTH = 3;

uploadMultipleFiles = (e) => {
  if (Array.from(e.target.files).length > MAX_LENGTH) {
    e.preventDefault();
    alert(`Cannot upload files more than ${MAX_LENGTH}`);
    return;
  }
}