Cómo listar carpetas y archivos de un directorio con Cordova

Cómo listar carpetas y archivos de un directorio con Cordova

Hasta el día de hoy, no hay un plugin que proporcione un explorador personalizable de archivos y carpetas hecho para cordova.

Por ejemplo, este plugin solo está disponible para Android y tiene un par de defectos como: solo admite orientación vertical además de no tener un diseño muy versátil. Aunque es util usar plugins de terceros, a veces no encontrarás lo que necesitas.

La idea de un plugin de explorador open source puede ser complicado por muchos factores, como compatibilidad, personalización entre otros. Así que es bastante recomendable crear para tu propia aplicación un explorador de archivos, con el plugin necesario, lograrlo será más facil de lo que piensas.

Requisito

Necesitarás el plugin cordova file en tu proyecto, pues es el punto más importante de tu explorador pues necesitarás acceso a el sistema de archivos del dispositivo. Descarga el plugin ejecutando el siguiente comando para cordova:

cordova plugin add cordova-plugin-file

Ahora todo debería estár listo y sencillo de programar !

Implementación

1. Obtiene el contenido de un directorio

Primero necesitas entender como el código básico funciona (recuerda ejecutar todo despues del evento onDeviceReady):

// Puedes usar una carpeta predeterminada como destino
// o proporciona un directorio directamente: "file://my/custom/folder"
var directorio = cordova.file.externalRootDirectory; 

window.resolveLocalFileSystemURL(directorio, function (dirEntry) {
    var directoryReader = dirEntry.createReader();
    directoryReader.readEntries(onExitoCallback,onErrorCallback);
});

function onExitoCallback(info){
    // info contiene un objeto con todos las carpetas y archivos
    // que existen en el directorio proporcionado
    // console.log(info);
}

function onErrorCallback(){
    // In case of error
}

Usaremos resolveLocalFileSystemURL para obtener una entrada de directorio, esta tendrá toda la información sobre el contenido y archivos del directorio ingresado.

2. Mostrar el contenido

Ahora viene la "parte complicada" que dependera unica y exclusivamente de ti, renderiza las entradas del directorio de la manera que quieras y con el estilo que desees. Por ejemplo, el siguiente ejemplo ilustra un "explorador de archivos" muy sencillo hecho con una lista no organizada (<ul>) y lógica para renderizarlo bastante sencilla:

HTML

<div>
     <ul id="select-demo">

     </ul>
</div>

Javascript

/**
 * la función listPath renderizará en el elemento UL
 */
function listPath(myPath){
    window.resolveLocalFileSystemURL(myPath, function (dirEntry) {
        var directoryReader = dirEntry.createReader();
        directoryReader.readEntries(onSuccessCallback,onFailCallback);
    });

    function onSuccessCallback(entries){
        for (i=0; i<entries.length; i++) {
            var row = entries[i];
            var html = '';         

            if(row.isDirectory){
                //Dibujar una carpeta y al darle click, renderizará el contenido de esta nuevamente
                html = '<li onclick="listPath('+"'"+row.nativeURL+"'"+');">'+row.name+'</li>';
            }else{
                // alertar el path del archivo
                html = '<li onclick="getFilepath('+"'"+row.nativeURL+"'"+');">'+row.name+'</li>';
            }
        }
       
        document.getElementById("select-demo").innerHTML = html;
    }

    function onFailCallback(e){
        console.error(e);
        // Mostrar informacion de error en la consola
    }
}

function getFilepath(thefilepath){
    alert(thefilepath);
}

Cuando ejecutes la función listPath("file://storage/0"); todo el contenido de la carpeta será listada en la lista no organizada. Los elementos LI anidados, cuando sean clickeados dependiendo del tipo que sea (archivo o carpeta) ejecutará una acción correspondientemente.

Que te diviertas !

Esto podría ser de tu interes

Conviertete en un programador más sociable