JavaScript FileReader: Save multiple text files' contents to array for later use

Question

I try to save the contents of multiple text files to an array variable using only pure JavaScript. I found some similar questions and answers here on Stackoverflow and tried this and that, without success. Maybe this question is easy to answer, but I'm a beginner, please be tolerant.

Here is my code:

<script>
   fileContents=new Array();

   function getThem(){
      var allFiles=document.getElementById("fileInput").files;

      for(var allFilesCounter=0;allFilesCounter<allFiles.length;allFilesCounter++){

         function readFile(file){
            var reader=new FileReader();

            reader.onload=function(){
               alert(reader.result);
               fileContents[fileContents.length]=reader.result;
            };
            reader.readAsText(file,"UTF-8");
         };
      };
   };
</script>

<input type="file" accept="text/plain" id="fileInput" multiple="multiple" onChange="getThem();">

I already found out that the FileReader works "asynchronous", which seems to require that all processing of the file content is done inside the reader.onload-function. "alert" does work, as well as other processing, but not assigning the content to the global variable, that's "fileContents[fileContents.length]" in my case.

Is it achievable with that rather simple code, or should I accept that it is not possible to get the file contents saved to a variable (which seems to me to be the most simple and elegant way, but probably I'm wrong).

Thank you in advance for your help.

kakamg0 · Accepted Answer · 2017-10-21 20:27:46Z

1

You're on the right path but you created the function readFile and didn't make a call to it, that is why you were not getting the file contents, but the function is unnecessary. Bellow there is a working snippet with a simpler code, hope you can understand it.

var fileContents = [];

document.getElementById('fileInput').addEventListener('change', handleFileSelect);

function handleFileSelect (e) {
    var allFiles = e.target.files;
    for (var i = 0; i < allFiles.length; i++) {
        var reader = new FileReader();
        reader.onload = function(e) {
            alert(e.target.result);
            fileContents.push(e.target.result);
        };
        reader.readAsText(allFiles[i]);
    };
};

<input type="file" accept="text/plain" id="fileInput" multiple="multiple" />

answered Oct 21, 2017 at 20:27

kakamg0

1,0965 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JavaScript FileReader: Save multiple text files' contents to array for later use

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related