Multiple file reading with FileReader and readAsArrayBuffer

Question

I'm trying to read and add multiple files to an array. I've already found out that readAsArrayBuffer is a asynchronous function, so i need to wait for previous uploads to end. I tried to use callbacks but i failed.

<form enctype="multipart/form-data">
  <input id="file-input" type="file" multiple="" accept="image/*">
</form>
<div id="upload-list"></div>

Here's js file:

var fileList = [];
$(document).ready(function() {
  function addFiles(files) {
    for (var i = 0; i < files.length; i++) {
      var file = files[i];
      var reader = new FileReader();
      reader.onloadend = (function(file) {
        return function() {
          fileList.push(reader.result);
          $('#upload-list').append('<div class="upload-list-item">' + file.name '</div>');
        }
      })(file);
      reader.readAsArrayBuffer(file);
      console.log(fileList);
    }
  }
  $('#file-input').on('change', function(e) {
    addFiles(e.target.files);
  });
}

So now i have new FileReader each iteration, i got rid from Failed to execute 'readAsArrayBuffer' on 'FileReader': The object is already busy reading Blobs error, now i have the same files in my array, although I selected different.

fileList.push(reader.result); ... the problem is what reader will be (you fixed file using an IIFE, but not reader — Jaromanda X
– Jaromanda X, Commented Oct 13, 2017 at 1:01

Jaromanda X · Accepted Answer · 2017-10-13 10:07:42Z

8

Your issue is that reader is going to be clobbered - using .forEach will mean each iteration is safe in its own closure - no need for IIFE kludges either

function addFiles(files) {
    // files is not a regular Array
    [].forEach.call(files, function(file) {
        var reader = new FileReader();
        reader.onloadend = function() {
            fileList.push(reader.result);
            $('#upload-list').append('<div class="upload-list-item">' + file.name + '</div>');
        }
        reader.readAsArrayBuffer(file);
    });
}

However this does not guarantee any particular "order" of the $('#upload-list').append - because asynchronous code is asynchronouos

Using Promises (which CAN be polyfilled for older browsers) you could do something like

function addFiles(files) {
    return Promise.all([].map.call(files, function (file) {
        return new Promise(function (resolve, reject) {
            var reader = new FileReader();
            reader.onloadend = function () {
                resolve({ result: reader.result, file: file });
            };
            reader.readAsArrayBuffer(file);
        });
    })).then(function (results) {
        results.forEach(function (result) {
            $('#upload-list').append('<div class="upload-list-item">' + result.file.name + '</div>');
        });
        return results;
    });
}

This will guarantee the order that $('#upload-list').append is called

edited Oct 13, 2017 at 10:07

answered Oct 13, 2017 at 1:21

Jaromanda X

57.1k6 gold badges82 silver badges96 bronze badges

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

1 Comment

randomsuffer Over a year ago

forEach worked for me, thanks! except i placed reader.readAsArrayBuffer(file); into forEach. i think, i understood that things with IIFE.

guest271314 · Accepted Answer · 2017-10-13 01:26:27Z

0

There are syntax errors at + file.name, and missing ) at .ready(), defined parameter and pass reader to IIFE

var fileList = [];
$(document).ready(function() {
  function addFiles(files) {
    for (var i = 0; i < files.length; i++) {
      var file = files[i];
      var reader = new FileReader();
      reader.onloadend = (function(file, reader) {
        return function() {
          fileList.push(reader.result);
          $('#upload-list').append('<div class="upload-list-item">' + file.name + '</div>');
        }
      })(file, reader);
      reader.readAsArrayBuffer(file);
      console.log(fileList);
    }
  }
  $('#file-input').on('change', function(e) {
    addFiles(e.target.files);
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form enctype="multipart/form-data">
  <input id="file-input" type="file" multiple="" accept="image/*">
</form>
<div id="upload-list"></div>

edited Oct 13, 2017 at 1:26

answered Oct 13, 2017 at 1:08

guest271314

1

6 Comments

guest271314 Over a year ago

@JaromandaX Do you suggest including code at Answer which passed reader to the IIFE?

Jaromanda X Over a year ago

Not at all. forEach will fix this without resorting to new and overused toys like async/await that break older browser compatibility for no benefit at all

guest271314 Over a year ago

@JaromandaX Would not. Would probably define only a single instance of FileReader as well

guest271314 Over a year ago

@JaromandaX Always wondered what that :p meant. Am out of any and all loops

Jaromanda X Over a year ago

it's a "tongue hanging out" smiley (a smiley is a text only emoji - not sure if you needed that explanation :p )

|

Collectives™ on Stack Overflow

Multiple file reading with FileReader and readAsArrayBuffer

2 Answers 2

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related