Cómo descomprimir (extraer) el contenido de archivos zip en Cordova

Cómo descomprimir (extraer) el contenido de archivos zip en Cordova

Hoy en día los dispositivos móbiles son capaces casi de cualquier cosa. Los archivos zip permiten al usuario manipular un montón de archivos mientras se maneja uno solo. La descompresión de esta clase de archivos tambien puede ser logrado en Cordova. El intento de este artículo no usará JavaScript para descomprimir directamente el archivo pues se puede volver tedioso haciendolo con este lenguaje, así que te recomendamos usar código nativo para ello. Pero no te preocupes, pues seguiras trabajando en JavaScript gracias al plugin que manejará el código nativo por ti !

1. Instalar el plugin cordova-plugin-zip

Con el fin de extraer el contenido de un archivo zip a algun directorio de tu dispositivo, te recomendamos usar el plugin cordova-plugin-zip. Este plugin usa las utilidades de java.util.zip en Android y SSZipArchive en iOS.

Instala el plugin ejecutando el siguiente comando de cordova:

cordova plugin add cordova-plugin-zip

El plugin funciona tanto para Android como para iOS. Si deseas más información acerca de este plugin, por favor visita el repositorio oficial en Github aquí.

2. Usando el plugin

El plugin expone un único método en su variable global llamado  zip.unzip. Este método espera hasta 4 argumentos en el siguiente orden:

  • ZipPath: el directorio y nombre de archivo absoluto que será descomprimido.
  • ZipExtractDirectory: el directorio absoluto de la carpeta donde los archivos deberían ser extraídos.
  • StatusCallback: función que recibe como unico argumento un numero que notifica si el proceso se ejecuto satisfactoriamente o no (0 si salio bien ó -1 si falló).
  • ProgressCallback: función ejecutada cada vez que progreso de la descompresión cambia. Recibe como primer argumento un objeto con la información acerca del progreso.

Recuerda encerrar todo el código que descomprimira el zip despues del evento deviceready del dispositivo, de otra manera el plugin no funcionará:

document.addEventListener('deviceready', function(){
    // Todo tu código aquí ...
}, false);

Una vez que estás seguro de que tu código será ejecutado, puedes proceder a dar los argumentos a la función unzip de la librería:

// Directorio del archivo
var ZipPath = "file:///storage/emulated/0/some-zipfile.zip";
// Directorio donde será extraido el contenido del archivo
var ZipExtractDirectory = "/storage/emulated/0/";

// Verificar si el archivo fue descomprimido correctamente
var StatusCallback = function(status){
    if(status == 0){
        // Todo Bien
    }else if(status == -1){
        // Todo Mal ... 
    }
};

// Manipular el progreso de la descompresión
var ProgressCallback = function(progressEvent){
    var percent =  Math.round((progressEvent.loaded / progressEvent.total) * 100);

    // Mostrar el progreso en la consola: 8% ...
    console.log(percent + "%");
};

// Descomprimir
window.zip.unzip(ZipPath, ZipExtractDirectory, StatusCallback, ProgressCallback);

Nota que ambos directorios (del archivo y del directorio final) pueden ser del tipo HTML File interface ó directorios absolutos, esto quiere decir que pueden ó no, contener file:// ó sin este.

Ejemplo

Usando el plugin FileBrowser para Android Cordova, vamos a seleccionar un archivo zip y luego extraeremos su contenido en la carpeta raiz del almacenamiento en Android:

document.addEventListener('deviceready', onDeviceReady, false);
            
function onDeviceReady(){
    // Cuando el usuario clickea algun boton
    document.getElementById("btn").addEventListener("click", () => {
        // Abrir el selector de archivos sencillos
        window.OurCodeWorld.Filebrowser.filePicker.single({
            success: function(data){
                if(!data.length){
                    // No se selecciono ningun archivo
                    return;
                }
                
                // data = Array con el directorio del archivo seleccionado
                // ["file:///storage/emulated/0/file.zip"]
                // Extraer en la raiz del almacenamiento
                processZip(data[0], "/storage/emulated/0");
            },
            error: function(err){
                console.log(err);
            }
        });
    }, false);
}

/**
 * 
 * @param zipSource Directorio del archivo zip
 * @param destination Directorio donde el archivo será descomprimido
 */
function processZip(zipSource, destination){
    // Manipular el progreso
    var progressHandler = function(progressEvent){
        var percent =  Math.round((progressEvent.loaded / progressEvent.total) * 100);

        // Mostrar progreso en la consola : 8% ...
        console.log(percent + "%");
    };

    // descomprimir el archivo
    window.zip.unzip(zipSource, destination, (status) => {
        if(status == 0){
            console.log("Archivo descomprimido satisfactoriamente");
        }

        if(status == -1){
            console.error("Archivo no pudo ser descomprimido");
        }
    }, progressHandler);
}

Que te diviertas !

Esto podría ser de tu interes

Conviertete en un programador más sociable