Reading multiple files with Javascript FileReader API one at a time

Question

I'm using the FileReader API to read multiple files.

<html> <body>
    <input type="file" id="filesx" name="filesx[]"
      onchange="readmultifiles(this.files)" multiple=""/>
    <div id="bag"><ul/></div>
<script>
window.onload = function() {
    if (typeof window.FileReader !== 'function') {
        alert("The file API isn't supported on this browser yet.");
    }
}

function readmultifiles(files) {
    var ul = document.querySelector("#bag>ul");
    while (ul.hasChildNodes()) {
        ul.removeChild(ul.firstChild);
    }

    function setup_reader(file) {
        var name = file.name;
        var reader = new FileReader();
        reader.onload = function(e) {
            var bin = e.target.result; //get file content

            // do sth with text

            var li = document.createElement("li");
            li.innerHTML = name;
            ul.appendChild(li);
        }
        reader.readAsBinaryString(file);
    }

    for (var i = 0; i < files.length; i++) { setup_reader(files[i]); }
}
</script> </body> </html>

The problem is that all files are read at the same time, and when the files have a total size (sum) that is very large, the browser crashes.

I want to read one file after another, so that the memory consumption is reduced.

Is this possible?

Just implemented solution for this, would recommend this solution - stackoverflow.com/a/13975129/984471 — Manohar Reddy Poreddy
– Manohar Reddy Poreddy, Commented Oct 19, 2019 at 16:41

Munawir · Accepted Answer · 2017-08-07 13:25:13Z

30

I came up with a solution myself which works.

function readmultifiles(files) {
  var reader = new FileReader();  
  function readFile(index) {
    if( index >= files.length ) return;
    var file = files[index];
    reader.onload = function(e) {  
      // get file content  
      var bin = e.target.result;
      // do sth with bin
      readFile(index+1)
    }
    reader.readAsBinaryString(file);
  }
  readFile(0);
}

edited Aug 7, 2017 at 13:25

Munawir

3,3569 gold badges36 silver badges51 bronze badges

answered Dec 20, 2012 at 15:18

xaedes

1,7762 gold badges17 silver badges19 bronze badges

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

3 Comments

Pacerier Over a year ago

Why don't you create a new FileReader object for each read? I believe the FileReader object is not meant to be reused after it's state had changed from 0 (empty) to 1 (loading), and then to 2 (done). This might give you some serious browser bugs.

red-o-alf Over a year ago

Nice recursive function.

Hieu.Gi Over a year ago

If I use "reader.addListener('load', callback)". It will be double at last item.

Oreo · Accepted Answer · 2017-11-15 17:24:10Z

23

I'm updating this question for the benefit of new users, who are looking for a solution to upload multiple files via the FileReader API, especially using ES.

Rather than manually iterating over each file, it's much simpler & cleaner to use Object.keys(files) in ES:

<input type="file" onChange="readmultifiles" multiple/>
<script>
function readmultifiles(e) {
  const files = e.currentTarget.files;
  Object.keys(files).forEach(i => {
    const file = files[i];
    const reader = new FileReader();
    reader.onload = (e) => {
      //server call for uploading or reading the files one-by-one
      //by using 'reader.result' or 'file'
    }
    reader.readAsBinaryString(file);
  })
};
</script>

edited Nov 15, 2017 at 17:24

Oreo

5995 silver badges17 bronze badges

answered Aug 17, 2017 at 7:13

Adil

22.6k7 gold badges31 silver badges56 bronze badges

2 Comments

Ricardo Saracino Over a year ago

Array.from(files).foreach(file => {}) also works nice

soger Over a year ago

For some reason this seems more javascript-ey solution to me than the accepted one.

Cerbrus · Accepted Answer · 2012-12-20 15:18:42Z

18

This should read the files one by one:

function readmultifiles(files) {
    var ul = document.querySelector("#bag>ul");
    while (ul.hasChildNodes()) {
        ul.removeChild(ul.firstChild);
    }
    // Read first file
    setup_reader(files, 0);
}

// Don't define functions in functions in functions, when possible.

function setup_reader(files, i) {
    var file = files[i];
    var name = file.name;
    var reader = new FileReader();
    reader.onload = function(e){
                        readerLoaded(e, files, i, name);
                    };
    reader.readAsBinaryString(file);
    // After reading, read the next file.
}

function readerLoaded(e, files, i, name) {
    // get file content  
    var bin = e.target.result;
    // do sth with text

    var li = document.createElement("li");
    li.innerHTML = name;
    ul.appendChild(li);

    // If there's a file left to load
    if (i < files.length - 1) {
        // Load the next file
        setup_reader(files, i+1);
    }
}

edited Dec 20, 2012 at 15:18

answered Dec 20, 2012 at 15:13

Cerbrus

73.3k19 gold badges138 silver badges151 bronze badges

1 Comment

Manohar Reddy Poreddy Over a year ago

This is good one especially when you need which file had completed onload so you can take file.type, etc.

Erik Martín Jordán · Accepted Answer · 2021-04-28 08:18:53Z

12

Define the input using multiple property:

<input onchange = 'upload(event)' type = 'file' multiple/>

Define the upload function:

const upload = async (event) => {
  
    // Convert the FileList into an array and iterate
    let files = Array.from(event.target.files).map(file => {

        // Define a new file reader
        let reader = new FileReader();

        // Create a new promise
        return new Promise(resolve => {

            // Resolve the promise after reading file
            reader.onload = () => resolve(reader.result);

            // Read the file as a text
            reader.readAsText(file);

        });

    });

    // At this point you'll have an array of results
    let res = await Promise.all(files);
  
}

answered Apr 28, 2021 at 8:18

Erik Martín Jordán

4,8934 gold badges34 silver badges42 bronze badges

1 Comment

jonybekov Over a year ago

This solution should be accepted

Nagnath Mungade · Accepted Answer · 2019-08-13 13:10:52Z

My complete solution is here:

 <html> <body>
    <input type="file" id="filesx" name="filesx[]"
      onchange="readmultifiles(this.files)" multiple=""/>
    <div id="bag"></div>
<script>
window.onload = function() {
    if (typeof window.FileReader !== 'function') {
        alert("The file API isn't supported on this browser yet.");
    }
}

function readmultifiles(files) {
  var reader = new FileReader();  
  function readFile(index) {
    if( index >= files.length ) return;
    var file = files[index];
    reader.onload = function(e) {  
      // get file content  
      var bin = e.target.result;
      // do sth with bin
      readFile(index+1)
    }
    reader.readAsBinaryString(file);
  }
  readFile(0);

 function setup_reader(file) {
        var name = file.name;
        var reader = new FileReader();

            var ul = document.createElement("ul");
            document.getElementById('bag').appendChild(ul);
        reader.onload = function(e) {
            var bin = e.target.result; //get file content

            // do sth with text

            var li = document.createElement("li");
            li.innerHTML = name;
            ul.appendChild(li);
        }
        reader.readAsBinaryString(file);
    }

    for (var i = 0; i < files.length; i++) { setup_reader(files[i]); }
}
</script> </body> </html>

Tudor Merlas · Accepted Answer · 2021-04-09 08:25:01Z

I implemented another solution using modern JS (Map, Iterator). I adapted the code from my Angular application (originally written with some TS features).

Like Steve KACOU mentioned, we create a different FileReader instance for each file.

<input type="file" id="filesx" name="filesx[]"
      onchange="processFileChange(this)" multiple=""/>

    function processFileChange(event) {
        if (event.target.files && event.target.files.length) {
            const fileMap = new Map();

            for (let i = 0; i < event.target.files.length; i++) {
                const file = event.target.files[i];
                const fileReader = new FileReader();
                fileMap.set(fileReader, file);
            }

            const mapEntries = fileMap.entries();
            readFile(mapEntries);
        }
    }

    function readFile(mapEntries) {
        const nextValue = mapEntries.next();

        if (nextValue.done === true) {
            return;
        }

        const [fileReader, file] = nextValue.value;

        fileReader.readAsDataURL(file);
        fileReader.onload = () => {
            // Do black magic for each file here (using fileReader.result)

            // Read the next file
            readFile(mapEntries);
        };
    }

Basically this takes advantage of passing objects by reference to perpetuate the map with every iteration. This makes the code quite easy to read in my opinion.

Leon · Accepted Answer · 2020-06-28 17:54:47Z

1

Taking the best parts of these answers.

<input type="file" onchange="readmultifiles(this.files)" multiple />
<script>
function readmultifiles(files) {
  for (file of files) {
    const reader = new FileReader();
    reader.readAsBinaryString(file);
    reader.fileName = file.name;
    reader.onload = (event) => {
      const fileName = event.target.fileName;
      const content = event.currentTarget.result;
      console.log({ fileName, content });
    };
  }
}

</script>

edited Jun 28, 2020 at 17:54

answered Jun 28, 2020 at 17:28

Leon

4311 gold badge5 silver badges8 bronze badges

1 Comment

Tudor Merlas Over a year ago

As far as I can tell this will not fix the issue of him not wanting files read in parallel.

STEVE K. · Accepted Answer · 2020-01-19 00:06:53Z

-1

You must instantiate a FileReader for each file to read.

function readFiles(event) {
  //Get the files
  var files = event.input.files || [];
  if (files.length) {
    for (let index = 0; index < files.length; index++) {
      //instantiate a FileReader for the current file to read
      var reader = new FileReader();
      reader.onload = function() {
        var result = reader.result;
        console.log(result); //File data
      };
      reader.readAsDataURL(files[index]);
    }
  }
}

answered Jan 19, 2020 at 0:06

STEVE K.

96913 silver badges16 bronze badges

1 Comment

Tudor Merlas Over a year ago

This will read the files in parallel. The OP asked for an implementation where they can be read sequentially.

kyun · Accepted Answer · 2021-10-26 02:48:35Z

-1

Try this

const setFileMultiple = (e) => {
  e.preventDefault();
  //Get the files
  let file = [...e.target.files] || [];

  file.forEach((item, index) => {
    let reader = new FileReader();

    reader.onloadend = () => {
      console.log("result", reader.result);
    };
    reader.readAsDataURL(file[index]);
  });

};

edited Oct 26, 2021 at 2:48

kyun

10.4k9 gold badges36 silver badges79 bronze badges

answered Oct 25, 2021 at 20:11

Huy Nguyễn

273 bronze badges

2 Comments

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Biller Builder Over a year ago

This will still read all at the same time.

Collectives™ on Stack Overflow

Reading multiple files with Javascript FileReader API one at a time

9 Answers 9

3 Comments

2 Comments

1 Comment

1 Comment

1 Comment

Comments

1 Comment

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

3 Comments

2 Comments

1 Comment

1 Comment

1 Comment

Comments

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related