Changing innerHTML of input type="file" causes Uncaught Type error?

Question

New to JS, so hopefully this is an easy fix. I'm trying to change the innerHTML from "File Upload" to the name of the file they chose. This works, but then when I click the "Upload" button, it get this error:

Uncaught TypeError: Cannot read property 'value' of null
at HTMLInputElement.upload

From my understanding, it's saying no value exists for the html element with id="upload" which is confusing because the HTML element with that ID is a button.

My HTML:

<form id="uploadForm" method="post" enctype="multipart/form-data">
  <label class="custom-file-upload" id="fileUploadLabel">
     <input type="file" name="file" id="dataUpload"/>File Upload
  </label>
  <input type="button" value="Upload" id="upload"/>
</form>

My JS:

dom.byId('dataUpload').onchange = uploadOnChange;

function uploadOnChange() {
    var filename = this.value;
    var lastIndex = filename.lastIndexOf("\\");
    if (lastIndex >= 0) {
        filename = filename.substring(lastIndex + 1);
    }
    dom.byId('fileUploadLabel').innerHTML = filename;
}

on(dom.byId("upload"), "click", upload);
function upload(){
  //Disable the upload button after click
  functionalBtn("disable");
  //Check that form was fully filled out
  var dataUpload = dom.byId("dataUpload").value;
  if (dataUpload == ""){
    alert("Please choose a zip file to upload.");
    functionalBtn("enable");
    return false;
  }
  else if (!dataUpload.endsWith(".zip")){
    alert("The input file must be a zip file.");
    functionalBtn("enable");
  }
  else{
    //upload the zip file and get back the itemID (via uploadSucceeded)
    var upload = esri.request({  
      url: "https://xxxxxx", 
      form: dojo.byId("uploadForm"),  
      content: {f: 'json'},  
      handleAs: 'json',
    }).then(uploadSucceeded, uploadFailed); 
  }
}

Am I somehow changing the value of id="dataUpload" when I change the label text? In my upload() function that is where I check the value of dataUpload after clicking the Upload button.

When I comment out dom.byId('fileUploadLabel').innerHTML = filename; everything works again (except the file name doesn't show in the file upload box which isn't what I want).

Is `dom.byId` the same as `document.getElementById`? If it is, then this error means that there's no such element with the `"fileUploadLabel"` id. But there is... — D. Pardal, Apr 05 '18 at 18:02
@D. Pardal - yes, dom.byId is the same (it's the Dojo framework) — MKF, Apr 05 '18 at 18:03
The error isn't saying that the value doesn't exist, it's saying that the element itself doesn't exist. In this [fiddle](https://jsfiddle.net/ws5986ys/1/) you can see the type=file doesn't interfere with getting this.value. — Namaskar, Apr 05 '18 at 18:04
I said that "there's **no such element** with the "fileUploadLabel" id.". — D. Pardal, Apr 05 '18 at 18:05
@D.Pardal I wasn't responding to you specifically; in the question: "From my understanding, it's saying no value exists for the html element with id="upload"". The error is happening within the function upload, which you have omitted, so we could keep guessing, but will not know what the issue is for sure. — Namaskar, Apr 05 '18 at 18:07
Right. There's some upload event listener in the input element... — D. Pardal, Apr 05 '18 at 18:09

Rhumborl · Accepted Answer · 2018-04-05T18:23:41.830

The problem is is that the innerHTML of the FileUploadLabel isn't File Upload, it is <input type="file" id="dataUpload">File Upload. After setting the innerHTML of the label, this becomes MyFile.txt.

In other words, the element dataUpload no longer exists!

So in upload() when you call dom.byId("dataUpload").value, you are getting the value of a non-existent element. Also this will obviously cause issues when you come to actually do the upload.

The at HTMLInputElement.upload bit isn't saying that upload is missing, it is part of the stack trace, saying which bit of code the error happened in.

You probably want to put the label text (File Upload) into a separate <span> and set the innerHTML of that instead.

That makes a heck of a lot of sense. Thanks!! That HTML line now looks like this: File Upload — MKF, Apr 05 '18 at 18:23

Changing innerHTML of input type="file" causes Uncaught Type error?

1 Answers1