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:

1. You put your input inside the label tag which is wrong.
2. You replace the input field by a text node (containing the file name) with the querySelector code line.
3. After having replaced the input field, there is no fileName on the page anymore, so it getElementById results in null.

Solution:

1. Put a label outside the input field
2. Don't operate on that label and don't try to overwrite the value of a file input field
3. After not removing the input field anymore, you can access the file name