Ionic native file plugin: file.readAsArrayBuffer() => Uncaught RangeError: Array buffer allocation failed

Question

I doing a intership project in Ionic. In this project, I have to read mbtiles files (via the @ionic-native/file plugin) and put them in leaflet (via the leaflet-tilelayer-mbtiles-tsplugin for leaflet). i do it like this:

this.file.readAsArrayBuffer(PATH, MBITILEFILENAME).then(res =>{
                L.tileLayer.mbTiles(res,{
                    maxZoom: 18,
                    attribution: "mbtiles"
                }).addTo(this.map)
            })

As I don't use the Ionic test app for some reasons, I have to test my app directly on the phone, and use Android studio console to see what's going on.

Here's the problem:
When I use a little mbtiles file (10Mo, testing file) it work, but when I use a bigger file (880Mo, file it has to read in prod environment) Android Console read me this:

I/chromium: [INFO:CONSOLE(312)] "Uncaught RangeError: Array buffer allocation failed", source: http://localhost/cordova.js (312)

I tried to search for the file.readAsArrayBuffer() size limit, but I found nothing.

Can you tell me what is thefile.readAsArrayBuffer() size limit? Any solution to bypass this limit with Ionic? Or something that can solve my problem?

Is this simply the phone not having enough memory to hold the bigger file in memory twice. github.com/apache/cordova-plugin-file/blob/… (One copy for the byte [] and another for the conversion to a ByteArray) — Garrett Barlocker
@GarrettBarlocker that was what I understand, but do you know how can I do to load only the needed part of the mbtiles in the memory? — Rorp
I think using a 880MB file in client side is realy a bad idea. Use simple tiles instead of mbTiles. — Gilsdav
@Gilsdav If I could I would, by the way. But the compagny want (absurdly) absolutly that and their is no way to change their mind (and I tried a lot) — Rorp

Rorp Rorp · Accepted Answer · 2021-01-12T09:02:59

I found how to do it, and forgot to post the answer. I used WebView from "@ionic-native/ionic-webview" so the map is do not need to be fully loaded, just the part needed.

var pathToFile =
    this.file.externalDataDirectory + PATHTOFILE
var truePath = WebView.convertFileSrc(pathToFile);
L.tileLayer(truePath + "/{z}/{x}/{y}.png", {
    maxZoom: 18,
    attribution: "local"
}).addTo(this.map);

Ionic native file plugin: file.readAsArrayBuffer() => Uncaught RangeError: Array buffer allocation failed

1 Answers