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.

The issue is that your telling the server to do the file selection input at the server level, not the client level.

What this means is that the server will actually generate the element server-side, and consider it to only exist there.

By removing the runat="server", you will be able to interface with that element using Javascript (which is client side)

I also added the jQuery headers to the top of the HTML and put it into the Code Snippet for you (by clicking on the little icon that looks like < > on top of a piece of paper).

What needs to be changed is:

<input id="uploadCSVFile" class="upload" type="file" accept=".csv"/>

and also add this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

And it should work 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"/>
          </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>