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?
CodePudding user response:
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>
CodePudding user response:
Problems:
- You put your
input
inside thelabel
tag which is wrong. - You replace the input field by a text node (containing the file name) with the
querySelector
code line. - After having replaced the input field, there is no
fileName
on the page anymore, so itgetElementById
results innull
.
Solution:
- Put a label outside the input field
- Don't operate on that label and don't try to overwrite the value of a file input field
- After not removing the input field anymore, you can access the file name