I have a validation function attached to a "change" event listener on an input of type "file".

Naturally, it doesn't fire until the change is detected, which means AFTER the files are added to it. So, I can add the files, the validator fails, and I can block the user from clicking "submit". Functionally, it "works".

But cosmetically, next to the file input, it says "3 files selected" or whatever. If you inspect the node, you will see that it has a populated files.fileList, as expected.

Here's the code, because someone always asks... but it's irrelevant to the actual questions:

domNode.defaultUI.on("change", '#files-upload', function(evt) {
  var fileList = evt.target.files;
  if (fcup.util.checkFiles(fileList) && fcup.util.validateExtraFields()) {
    fcup.util.traverseFiles(fileList, "change");
  }
  evt.preventDefault();
  evt.stopImmediatePropagation();
});

The questions:

1. Is there another event listener I can use that is "pre-change"?
2. I know that fileLists are read-only, but is there another way I can otherwise... remove... the fileList? You cannot null it or set it to empty, since that is still a write to the object.

I could possibly delete and recreate the entire input node... is that reasonable?