Edge browser inconsistent behavior with detecting file selection $(":file").unbind()

Question

I have button that triggers input file and opens file browser to select file. Once the file is selected I am running certain operations.

Problem:

It works fine on Chrome but Microsoft Edge has inconsistent behavior.In my experience first few tries(1,2 maybe 3) it does not go to this function below but it works fine after that.

$(":file").unbind().change(function () {console.log("file selected");
...
...
}

The code down below is exactly what I have used to test it against Chrome and Microsoft Edge

  function  toolbar_click(){
    var elem = document.getElementById("myFile");
                var count = 0;
                if (elem && document.createEvent) {

                    var evt = document.createEvent("MouseEvents");
                    evt.initEvent("click", true, false);
                    elem.dispatchEvent(evt);
                }
               

                // dataSource.add({ ProductName: "New Product" });
                $(":file").unbind().change(function () {
     console.log("file selected");
                    if (count < 1) {
                        if (this.files && this.files[0]) {
                            var reader = new FileReader();
                            //reader.onload = editViewModel.addFile();

                            reader.readAsDataURL(this.files[0]);
                             
                            //$('#showfilenames').append(this.files[0].name + '</br>');
                        }
                    }
 

                });
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" id="myFile"  style="display:none" >
  
</body>
<button class="k-button" id="insertAttachment" onclick="toolbar_click()"   > Click to choose file </button>

Any ideas how to fix it?

Answer 1

I am still not sure what your intentions were with using the onclick for handling files, but I would suggest letting the html file input handle everything to do with the files. If you just want to be able to print out all the file names attached, then you could use a separate function for that. Let me know if I am understanding what you are trying to do with the example below.

$(function(){
  $('#myFile').change(function() {
    var files = $(this)[0].files;
    var addList = "";
    for (i = 0; i < files.length; i++){
      addList += "<p>" + files[i].name + "</p>";
    }
    $('#fileSummary').html(addList);
  });

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form action="/home/uploadfiles" method="post" enctype="multipart/form-data">
    <input type="file" name="file" id="myFile" multiple />
    <br>
    <input type="submit" name="submit" value="Submit" />
</form>

<hr>
<div>
  <label>Files Inlcuded:</label>
  <br>
  <span id="fileSummary"></span>
</div>

Edit. Here is a sample using the "hack" to remotely use a file input. This is not normal behavior as is mentioned in the post I linked, but you can see how this will work to remotely use a file input:

HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="remoteClick">Remote File use</button>

<br>
<hr>

<div class="hiddenfile">
  <input name="upload" type="file" id="fileinput"/>
</div>

Javascript:

$(function(){
  $('#remoteClick').click(function(){
    $('#fileinput').trigger('click'); 
  }); 
});

CSS:

.hiddenfile {
 width: 0px;
 height: 0px;
 overflow: hidden;
}