HTML input’s FileList is always empty even though the file was submitted [duplicate]

I am trying to retrieve some files that were submitted through a HTML form, but whenever I submit the file input, the FileList object I get back is always empty.

Here is the form code:

<form id="fileForm">
    <input type="file" id="fileInput" name="file" accept="images/*">
    <input type="submit">
</form>

and the javascript:

function getFiles() {
    const fileInput = document.getElementById("fileInput");
    console.log(fileInput.files);
}
document.getElementById("fileForm").addEventListener("onSubmit", getFiles());

this is what the console outputs after submitting my image file: