new - Enorme JavaScript HTML5 blob(de ArrayBuffers grandes) para construir un archivo gigante en el lado del cliente

new file javascript

Question

Estoy escribiendo una aplicación de navegador web (lado del cliente) que descarga una gran cantidad de fragmentos de muchos lugares y los une para crear un blob. Luego ese blob se guarda en el sistema de archivos local como un archivo común. La forma en que lo hago es por medio de objetos ArrayBuffer y un blob.

var blob = new Blob([ArrayBuffer1, ArrayBuffer2, ArrayBuffer3, ...], {type: mimetype})

Esto funciona bien para archivos pequeños y medianos (hasta 700 MB aprox), pero el navegador falla con archivos más grandes. Entiendo que la memoria RAM tiene sus límites. El caso es que necesito compilar el blob para generar un archivo, pero quiero permitir que los usuarios descarguen archivos mucho más grandes que ese tamaño (imagina, por ejemplo, archivos de aproximadamente 8GB).

¿Cómo puedo construir el blob evitando límites de tamaño? El almacenamiento local es más limitado que la memoria RAM, por lo que no sé qué usar o cómo hacerlo.

Answer 1

¿Parece que solo están concatenando matrices de datos juntos? ¿Por qué no ir agregando los arreglos en un blob gigante? Tendría que iterar y agregar cada arrayBuffer uno a la vez. Debería seek el final del editor de archivos para agregar matrices. Y al leer solo partes de tu blob gigante, obtienes una slice del blob para evitar que el navegador se bloquee.

Anexando la función

function appendToFile(fPath,data,callback){
    fs.root.getFile(fPath, {
        create: false
    }, function(fileEntry) {
        fileEntry.createWriter(function(writer) {
            writer.onwriteend = function(e) {
                callback();
            };
            writer.seek(writer.length);
            var blob = new Blob([data]);
            writer.write(blob);
        }, errorHandler);
    }, errorHandler);
}

Nuevamente, para evitar volver a leer todo el blob, solo lea porciones / trozos de su blob gigante cuando genere el archivo que menciona.

Función de lectura parcial

function getPartialBlobFromFile(fPath,start,stop,callback){
    fs.root.getFile(fPath, {
        creation:false
    }, function(fileEntry){
        fileEntry.file(function(file){
            var reader = new FileReader();
            reader.onloadend = function(evt){
                if(evt.target.readyState == FileReader.DONE){
                    callback(evt.target.result);
                }
            };
            stop = Math.min(stop,file.size);
            reader.readAsArrayBuffer(file.slice(start,stop));
        }, errorHandler)
    }, errorHandler);
}

Es posible que deba mantener los índices, tal vez en una sección de encabezado de su BLOB gigante. Necesitaría saber más antes de poder brindar comentarios más precisos.

Actualización: evitando límites de cuota, Temporal vs Persistente en respuesta a sus comentarios a continuación
Parece que está teniendo problemas con la cuota de almacenamiento porque está usando almacenamiento temporal. El siguiente es un fragmento prestado de google encontrado here

El almacenamiento temporal se comparte entre todas las aplicaciones web que se ejecutan en el navegador. El grupo compartido puede tener hasta la mitad del espacio disponible en el disco. El almacenamiento ya utilizado por las aplicaciones se incluye en el cálculo del grupo compartido; es decir, el cálculo se basa en (espacio de almacenamiento disponible + almacenamiento utilizado por las aplicaciones) * .5.

Cada aplicación puede tener hasta el 20% del pool compartido. Como ejemplo, si el espacio total en disco disponible es de 50 GB, el grupo compartido es de 25 GB y la aplicación puede tener hasta 5 GB. Esto se calcula a partir del 20% (hasta 5 GB) de la mitad (hasta 25 GB) del espacio disponible en el disco (50 GB).

Para evitar este límite, tendrá que cambiar a persistente, lo que le permitirá establecer un cupo hasta el espacio libre disponible en el disco. Para hacer esto, use lo siguiente para inicializar el sistema de archivos en lugar de la solicitud de almacenamiento temporal.

navigator.webkitPersistentStorage.requestQuota(1024*1024*5, 
  function(gB){
  window.requestFileSystem(PERSISTENT, gB, onInitFs, errorHandler);
}, function(e){
  console.log(''Error'', e);
})