document.querySelector causing errors on other methods when called - html

Question

My apologies for the stupid question, but I am trying to change the name of a button upon uploading a file. My code to change it is this, via TypeScript:
const i = (document.querySelector('label') as any).innerText = filename;
The code above, inside the fileName method, changes the "Upload Project File" text into the name of whatever file that is uploaded.
<div class="row">
<div class="clg6 cmd8 csm10 cxs12" v-if="this.projectFile">
<button
class="button primary outline medium upload">
<label>
<input
type="file"
name="projectFile"
id="fileName"
accept=".xls, .xlsx, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
v-on:change="validateFileType(); hashContentMD5(); fileName; getPresignedURL()"/>
<i class="fas fa-cloud-upload"></i>
Upload Project File
</label>
</button>
</div>
</div>
And it works. However, upon change, it brings up errors in my other methods when they're called, such as this:
const file = (document.getElementById('fileName')as any).files[0]
The error that shows up is
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'files')
Removing the document.querySelector removes the error. This is the first time that I've encountered this. How can I fix it?

Answer 1

Problems:
You put your input inside the label tag. I learned this is okay.
Why using a button outside the whole label and input tags? I don't understand what your intention was with that.
You replace the inside of the label tag by a text node (containing the file name). Through your replacement you delete your input field out of the DOM. See querySelector line in your code.
After having replaced the input field, there is no fileName on the page anymore, so it getElementById results in null.
Solution:
(optionally) I'd delete the button tag and only keep the inside of it.
Don't operate on that label and don't try to overwrite the value of a file input field
By not removing the input field anymore, you can access it and read out the file name
See my example here: https://stackblitz.com/edit/js-fdxxnf

Answer 2

You can try with ref:
new Vue({
el: '#demo',
data() {
return {
projectFile: true
}
},
methods: {
changeLbl() {
this.$refs.lab.innerText = 'filename'
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<div class="row">
<div class="clg6 cmd8 csm10 cxs12" v-if="projectFile">
<button
class="button primary outline medium upload">
<label ref="lab">
<input
type="file"
name="projectFile"
id="fileName"
accept=".xls, .xlsx, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
v-on:change="changeLbl"/>
<i class="fas fa-cloud-upload"></i>
Upload Project File
</label>
</button>
</div>
</div>
</div>