Input type file retrieval/access question

Can someone tell me why the first code snippet works and the second does not? I am able to get filelist in the first snippet but its empty in the second one?

Works:

<label class="bi bi-paperclip" title="click to attach files">
    <input type="file" id="uploadFile" style="display: none;" multiple>
</label>

$(document).on('change', '#uploadFile', function () {
    const fileInput1 = $(this)[0];
    const files1 = fileInput1.files;
    console.log("**this[0]**");
    console.log(files1);
});

Does not work, always empty:

<label class="bi bi-paperclip" title="click to attach files">
    <input type="file" id="uploadFile" style="display: none;" multiple>
</label>

$(document).on('change', '#uploadFile', function () {
    const fileInput = document.getElementById('uploadFile');
    const files = fileInput.files;
    console.log("**document.getElementById**");
    console.log(files);
});

console