File type and size validation

[TrendyTim]

I saw the file validation method but i would prefer a more in your face/immediate feedback on an invalid file being added and also adding filesize validation as well, even with the accept attribute people can still bypass that and select other files, it'd be nice to forcefully tell them they selected a bad file tyep or too large a file (wish the browsers had max file size and enforced file types natively but we have to make do with what we have hey.

validateFileType(){
	var fileInput = this.$refs.file
    // get accept list as regex (replace /* in mime type with any word match so that audio/* can match any audio types, replace comma with | to OR it)
    var typeRegex = new RegExp(fileInput.accept.replaceAll(',','|').replaceAll( '*', '[^\w,]+' ))

    // return if all files match
    return Array.prototype.every.call(fileInput.files,function(file) {
        var fileExt = file.name.split('.').pop();
		var fileType = file.type
       return typeRegex.test( fileType ) || typeRegEx.test(fileExt);
    } );
  }

validateFileSize(){
    var fileInput = this.$refs.file
	if (this.maxFileSize) {
    // return if all files match
    return Array.prototype.every.call(fileInput.files,function(file) {
       return file.size <= this.maxFileSize;
    } );
	}
	else { return true }
  }

I was thinking of adding it to FormulateInputFile.vue in handleFile, but also raise an event with File name/type/size and the field name so i can report on it better, and also clear the input if it was invalid, but i cannot figure out raising an event from there or clearing the input.

Do you have any suggestions on how to integrate that ?