LukeO LukeO - 17 days ago 5
HTML Question

File Input - Unable to get property 'addEventListener' of undefined or null reference

I have an input file control which I want to use to select a .csv file. I have been trying to add an event listener to the control so that a function 'csvFileSelected' is called when a file is selected.
However, whenever my app tries to add the event listener an error is thrown saying:


0x800a138f - JavaScript runtime error: Unable to get property 'addEventListener' of undefined or null reference


My javascript file looks like:

function bindEvents() {
$(document).ready(function () {
document.getElementById("uploadCSVFile").addEventListener('change', csvFileSelected, false);
});

}

function csvFileSelected()
{
// Get CSV file and store in a hidden field
var csvFile = document.getElementById("uploadCSVFile").files[0];
}


This is my HTML code:

<div class="panel panel-info">
<div class="panel-heading text-center" style="font-weight: bold;">Bulk Invite</div>
<div class="panel-body">
<div class="form-group">
<div class="row" style="text-align: center;">
<div class="col-xs-12 col-md-offset-3 col-md-3" style="font-weight: bold; padding-top: 15px">
Import Users From .CSV File:
</div>
<div class="col-xs-12 col-md-3" style="padding-left: 50px;">
<div id="csvBtn" class="btn btn-default fileUpload" runat="server">
Select File
<input id="uploadCSVFile" class="upload" type="file" accept=".csv" runat="server" />
</div>
</div>
<div class="col-xs-12 col-md-3">
<asp:Label ID="fileName" runat="server" Text=""></asp:Label>
</div>
</div>
</div>
</div>
</div>


On my HTML page I have this script which is placed after the HTML elements:

<script type="text/javascript">
// called at the start of page load
$(document).ready(function () {
bindEvents();
});
</script>


I have tried many various possible solutions for this error however none of them worked for me.

I have made sure the script is placed at the bottom of the HTML page as well as having it encased $(document).ready so the listener shouldn't get added until the HTML has loaded, but this does not work.

I have also tried using:


window.onload = function(){

document.addEventListener('DOMContentLoaded', function () {


I have also used the JQuery statement for adding an event listener and I have tried using a different element, both still throw the same error.

It seems to me as though the functions are getting called even before the document/page is ready.

Any help would be greatly appreciated.

Many thanks,
Luke

Answer

It works fine.

function bindEvents() {
  $(document).ready(function() {
    document.getElementById("uploadCSVFile").addEventListener('change', csvFileSelected, false);
  });

}

function csvFileSelected() {
  // Get CSV file and store in a hidden field
  var csvFile = document.getElementById("uploadCSVFile").files[0];
  console.log(csvFile);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="panel panel-info">
  <div class="panel-heading text-center" style="font-weight: bold;">Bulk Invite</div>
  <div class="panel-body">
    <div class="form-group">
      <div class="row" style="text-align: center;">
        <div class="col-xs-12 col-md-offset-3 col-md-3" style="font-weight: bold; padding-top: 15px">
          Import Users From .CSV File:
        </div>
        <div class="col-xs-12 col-md-3" style="padding-left: 50px;">
          <div id="csvBtn" class="btn btn-default fileUpload" runat="server">
            Select File
            <input id="uploadCSVFile" class="upload" type="file" accept=".csv" runat="server" />
          </div>
        </div>
        <div class="col-xs-12 col-md-3">
          <asp:Label ID="fileName" runat="server" Text=""></asp:Label>
        </div>
      </div>
    </div>
  </div>
</div>


<script type="text/javascript">
  // called at the start of page load
  $(document).ready(function() {
    bindEvents();
  });
</script>

Comments