FileReader onload not getting fired for second attempt in IE 11 after contents of the uploaded file is changed

Question

FileReader onload not getting fired on second time when the same file still selected with IE11 but the contents of file has changed, it's getting fired all the time for FireFox,Chrome.

Operation Details

On First Click, its all okay for all browsers(but IE sometime still missing some words from file).
After that I changed the contents of the file.
And then I click second attempt to btnDownload , Firefox and Chrome still reading the updated contents. BUT IE DOES NOT WORK!

.html

<input type="file" id="fileSelect" style="" accept=".csv">

<a type="button"  class="btn" id="btnDownload" onclick="csvDownload()" 
download>  CSV DOWNLOAD  </a>

myjavascript.js

var fileInput = document.getElementById("fileSelect"); //<input type="file" id="fileSelect">
var result = "";
readFile = function() {
changeAPInfoName();
if (!isFileSupported()) {
    console.log('The browser does not support the API.');

} else {
    if (fileInput.files.length > 0) {
        var reader = new FileReader();
        reader.onload = function() {
           result = reader.result;

           alert("WANT TO GET HERE ,ALTHOUGH FILE CONTENTS ARE CHANGED.(IN IE 11)");            

           document.getElementById('MY_HIDDEN_FIELD').setAttribute('value',result);
      }

    reader.readAsText(fileInput.files[0]);

    reader.onerror = function() {
         console.log('The file cannot be read.'+fileInput.files[0].fileName);
      };
}

// EVENT FOR DOWNLOAD BUTTON!!!!
function csvDownload(){
     readFile();  

     // using ajax to sent info from files and get download file.
}

Please help me with following issue.

How can I get to the line in reader.onload method although file contents are changed. alert("WANT TO GET HERE ,ALTHOUGH FILE CONTENTS ARE CHANGED.(IN IE 11)"); .

Answer 1

Replace this

reader.onload = function() {
       result = reader.result;

       alert("WANT TO GET HERE ,ALTHOUGH FILE CONTENTS ARE CHANGED.(IN IE 11)");            

       document.getElementById('MY_HIDDEN_FIELD').setAttribute('value',result);
  }

with

reader.addEventListener("load",function(){
result = reader.result;

           alert("WANT TO GET HERE ,ALTHOUGH FILE CONTENTS ARE CHANGED.(IN IE 11)");            

           document.getElementById('MY_HIDDEN_FIELD').setAttribute('value',result);
});

I hope this is helpful. I was facing the same problem and I used this method and it worked

Example of working FileReader:

<html>

<head>



    <script>


        function read(){
            //Select the element containing file
              var file =document.querySelector('input[type=file]').files[0];
        //create a FileReader
        reader = new FileReader();
        //add a listener
        reader.addEventListener('load',function(){

            alert(reader.result);

        },false);

        if(file){
             //ReadFile
            reader.readAsDataURL(file);//You can read it in many other forms

        }
        }

    </script>



    </head>

    <body>

    <input type="file" name="myFile" id="myFile"  onchange="read()">




    </body>

</html>

For more on FileReader check this document out : Link

FileReader onload not getting fired for second attempt in IE 11 after contents of the uploaded file is changed

Question

1 answers

solution1
1 2016-05-23 07:49:12

FileReader onload not getting fired for second attempt in IE 11 after contents of the uploaded file is changed

Question

1 answers

solution1 1 2016-05-23 07:49:12

solution1
1 2016-05-23 07:49:12