File Chooser Dialog for PhoneGap Applications

I needed a file chooser dialog box for an application I am working on. Android APIs do not have File Chooser dialog, and I had created my own native Android File Chooser dialog for my application Annotated Call Log. However I did not want to use that for my current application, because it needs to run on iOS too.

A quick search on the Web for PhoneGap based file chooser dialog did not give me what I was looking for, so I decided to create one using PhoneGap file APIs, JQuery and JQuery Mobile. You can find the source code here. The page won’t display much in the browser. Use ‘View Source’ of your browser to see the source code.

When I used this in my mobile application, it looks like this –

The current path is displayed at the top. The first entry in the file list is to go up one level.

I have made it configurable so that you can specify –

• If new file and or folder buttons should be displayed
• Set initial folder. This has to be DirectoryEntry
• If only folders to be displayed (for Directory Browser)
• Callback functions for file selection and directory selection. If you return false from these callback functions, then dialog is closed.
• Callback handler when OK is clicked. The argument to the callback function is currently selected DirectoryEntry in the dialog box.

All these parameter should be set in an Object called ‘file_Browser_params’

How to use this

You need to include necessary files for JQuery, JQuery Mobile and PhoneGap in your project or main file (that invokes File Chooser). Then create a button in the calling page to launch the browser –

<a href="fileBrowser.html" id="browseBtn" data-role="button"
   data-inline="true">Browse</a>

Then set parameters for the file chooser just before displaying it. You can do that by handling click event for ‘browseBtn’

$("#browseBtn").click(function(){
    //check if last selected folder was set
    if (typeof lastFolderSelected == 'undefined')
        lastFolderSelected = null;

    //create file chooser dialog parameters
    file_Browser_params = {
        directory_browser : false, //this is file browser. Default is false

        new_file_btn : true, //show new file button. Default is true

        new_folder_btn : true, //shoe new folder button. Default is true

        initial_folder : lastFolderSelected, //initial folder when dialog is displayed

        //callback function when file is selected
        on_file_select : function(fileEntry) {
            return false; //close dialog when any file is selected (tapped)
        },

        //callback function when folder is selected
        on_folder_select : function(dirEntry) {
            //don't do anything
        },

        //callback function when OK button is clicked
        on_ok : function (dirEntry) {
            //save the last folder path
            lastFolderSelected = dirEntry;
        }
};

All above parameters are optional, including file_browser_params object. This dialog box can be used as both File selection or Directory selection dialog box.

-Ram Kulkarni