React-native: Implement FileReader.readAsArrayBuffer

Created on 19 Sep 2018 · 4Comments · Source: facebook/react-native

Description

FileReader.readAsArrayBuffer is not implemented.

Reproducible Demo

https://github.com/facebook/react-native/blob/master/Libraries/Blob/FileReader.js#L83-L85

I plan on working towards implementing this if approved.

Ran Commands Locked

Source

Smarticles101

👍9 ❤6

Most helpful comment

Hi! I need readAsArrayBuffer implementation too, is there any workaround to use this with expo? I'm using expo to avoid using a mac in the development process.

Thanks!

mgscreativa on 3 Oct 2018

👍7

All 4 comments

We are automatically closing this issue because it does not appear to follow any of the provided issue templates.

Please make use of the bug report template to let us know about a reproducible bug or regression in the core React Native library.

If you'd like to propose a change or discuss a feature request, there is a repository dedicated to Discussions and Proposals you may use for this purpose.

react-native-bot on 19 Sep 2018

👎7

Hi! I need readAsArrayBuffer implementation too, is there any workaround to use this with expo? I'm using expo to avoid using a mac in the development process.

Thanks!

mgscreativa on 3 Oct 2018

👍7

Hello,
I manage to make it work by using readAsDataURL:

FileReader.prototype.readAsArrayBuffer = function (blob) {
    if (this.readyState === this.LOADING) throw new Error("InvalidStateError");
    this._setReadyState(this.LOADING);
    this._result = null;
    this._error = null;
    const fr = new FileReader();
    fr.onloadend = () => {
        const content = atob(fr.result.substr("data:application/octet-stream;base64,".length));
        const buffer = new ArrayBuffer(content.length);
        const view = new Uint8Array(buffer);
        view.set(Array.from(content).map(c => c.charCodeAt(0)));
        this._result = buffer;
        this._setReadyState(this.DONE);
    };
    fr.readAsDataURL(blob);
}

// from: https://stackoverflow.com/questions/42829838/react-native-atob-btoa-not-working-without-remote-js-debugging
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
const atob = (input = '') => {
    let str = input.replace(/=+$/, '');
    let output = '';

    if (str.length % 4 == 1) {
        throw new Error("'atob' failed: The string to be decoded is not correctly encoded.");
    }
    for (let bc = 0, bs = 0, buffer, i = 0;
        buffer = str.charAt(i++);

        ~buffer && (bs = bc % 4 ? bs * 64 + buffer : buffer,
            bc++ % 4) ? output += String.fromCharCode(255 & bs >> (-2 * bc & 6)) : 0
    ) {
        buffer = chars.indexOf(buffer);
    }

    return output;
}