Question

11

Using FileReader.readAsArrayBuffer() on changed files in Firefox

rated 0 times [ 16] [ 5] / answers: 1 / hits: 67122 / 9 Years ago, tue, august 25, 2015, 12:00:00

I'm running into an odd problem using FileReader.readAsArrayBuffer that only seems to affect Firefox (I tested in the current version - v40). I can't tell if I'm just doing something wrong or if this is a Firefox bug.

I have some JavaScript that uses readAsArrayBuffer to read a file specified in an <input> field. Under normal circumstances, everything works correctly. However, if the user modifies the file after selecting it in the <input> field, readAsArrayBuffer can get very confused.

The ArrayBuffer I get back from readAsArrayBuffer always has the length that the file was originally. If the user changes the file to make it larger, I don't get any of the bytes after the original size. If the user changes the file to make it smaller, the buffer is still the same size and the 'excess' in the buffer is filled with character codes 90 (capital letter 'Z' if viewed as a string).

Since this code is so simple and works perfectly in every other browser I tested, I'm thinking it's a Firefox issue. I've reported it as a bug to Firefox but I want to make sure this isn't just something obvious I'm doing wrong.

The behavior can be reproduced by the following code snippet. All you have to do is:

Browse for a text file that has 10 characters in it (10 is not a magic number - I'm just using it as an example)

Observe that the result is an array of 10 items representing the character codes of each item

While this is still running, delete 5 characters from the file and save

Observe that the result is still an array of 10 items - the first 5 are correct but the last 5 are all 90 (capital letter Z)

Now added 10 characters (so the file is now 15 characters long)

Observe that the result is still an array of 10 items - the last 5 are not returned

function ReadFile() {

  var input = document.getElementsByTagName(input)[0];

  var output = document.getElementsByTagName(textarea)[0];



  if (input.files.length === 0) {

    output.value = 'No file selected';

    window.setTimeout(ReadFile, 1000);

    return;

  }



  var fr = new FileReader();

  fr.onload = function() {

    var data = fr.result;

    var array = new Int8Array(data);

    output.value = JSON.stringify(array, null, '  ');

    window.setTimeout(ReadFile, 1000);

  };

  fr.readAsArrayBuffer(input.files[0]);



  //These two methods work correctly

  //fr.readAsText(input.files[0]);

  //fr.readAsBinaryString(input.files[0]);

}



ReadFile();

<input type=file />

<br/>

<textarea cols=80 rows=10></textarea>

In case the snippet does not work, the sample code is also available as a JSFiddle here: https://jsfiddle.net/Lv5y9m2u/

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

emiliano

Add To Favorites

Follow

Total Points: 381

Total Questions: 109

Total Answers: 93

Location: Jersey

Member since Fri, Oct 1, 2021

3 Years ago

emiliano questions

1 Jest: Share Variables Between Test Files

Tue, Sep 1, 20, 00:00, 4 Years ago

1 Promise.all not working with an array of async functions

Sun, Jul 26, 20, 00:00, 4 Years ago

1 Discord.js: Fetch message from ALL channels

Fri, Jun 12, 20, 00:00, 4 Years ago

1 How to spoof a closed google form (...no longer accepting responses)? I want to submit a form after deadline

Thu, Jun 4, 20, 00:00, 4 Years ago

1 concurrently command not found but installed gloabally

Sat, Apr 25, 20, 00:00, 4 Years ago

View All

answered 9 Years ago lizette · Accepted Answer

Interesting, looks like Firefox is caching the buffer size even the file is modified.

You can refer to this link, replaced readAsArrayBuffer with is custom functionality which uses readAsBinaryString. Its working fine in Firefox and Chrome

function ReadFile() {

var input = document.getElementsByTagName(input)[0];

var output = document.getElementsByTagName(textarea)[0];



if (input.files.length === 0) {

    output.value = 'No file selected';

    window.setTimeout(ReadFile, 1000);

    return;

}



var fr = new FileReader();

fr.onload = function () {

    var data = fr.result;

    var array = new Int8Array(data);

    output.value = JSON.stringify(array, null, '  ');

    window.setTimeout(ReadFile, 1000);

};

fr.readAsArrayBuffer(input.files[0]);







//These two methods work correctly

//fr.readAsText(input.files[0]);

//fr.readAsBinaryString(input.files[0]);

}

if (FileReader.prototype.readAsArrayBuffer && FileReader.prototype.readAsBinaryString) {

    FileReader.prototype.readAsArrayBuffer = function readAsArrayBuffer () {

        this.readAsBinaryString.apply(this, arguments);

        this.__defineGetter__('resultString', this.__lookupGetter__('result'));

        this.__defineGetter__('result', function () {

            var string = this.resultString;

            var result = new Uint8Array(string.length);

            for (var i = 0; i < string.length; i++) {

                result[i] = string.charCodeAt(i);

            }

            return result.buffer;

        });

    };

}

ReadFile();