List android directory in Cordova (Filebrowser & Folderbrowser)

Till the date, there's not a lot of customizable file browser for cordova. For example this plugin is only available for android and seems to be locked in landscape orientation, although is good use third party libraries and plugins, sometimes you don't find something good or it doesn't acomplish your requirements.

An idea of a filebrowser plugin seems complicated due to many factors, as compatibility, customization and others, so it's very recommendable to create your own filechooser or browser for your project ! and with the correct plugins, is an easy task to achieve.

We require the cordova file plugin in our project, it is important to achieve a custom filebrowser, you can download with the following command :

$ cordova plugin add cordova-plugin-file

Now everything should be a piece of cake !

1) Retrieve all the content of a folder

First we need to understand how works the basic code (remember all should be executed on "onDeviceReady" event):

var myPath = cordova.file.externalRootDirectory; // We can use the default externalRootDirectory or use a path : file://my/custom/folder

window.resolveLocalFileSystemURL(myPath, function (dirEntry) {
     var directoryReader = dirEntry.createReader();
     directoryReader.readEntries(onSuccessCallback,onFailCallback);
});

function onSuccessCallback(entries){
  // The magic will happen here, check out entries with :
  // console.log(entries);
}

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

We will use resolveLocalFileSystemURL to retrieve a directory entry and get in an array all the content of the folder (which includes folders and files).

2) Display the content on something

Now comes the "difficult part", render the entries in the way you want ! 

For example, a very simple filebrowser made with a ul tag and simple code :

HTML

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

Javascript

/**
 * This function will draw the given path.
 */
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){
                 // We will draw the content of the clicked folder
                 html = '<li onclick="listPath('+"'"+row.nativeURL+"'"+');">'+row.name+'</li>';
           }else{
                 // alert the path of file
                 html = '<li onclick="getFilepath('+"'"+row.nativeURL+"'"+');">'+row.name+'</li>';
           }
       
       }
                
        document.getElementById("select-demo").innerHTML = html;
  }

  function onFailCallback(e){
    console.error(e);
    // In case of error
  }
}

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

When we call the function listPath("file://storage/0"); all the content of this folder will be rendered in the UL element. Nested LI elements , when clicked will execute it's action according to its type, folder or file.