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 -

PhoneGap File Chooser Dialog

PhoneGap File Chooser Dialog

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

This entry was posted in Android Programming, HTML5 and tagged , , . Bookmark the permalink.

35 Responses to File Chooser Dialog for PhoneGap Applications

  1. Kaye says:

    Thx for making the effort to explain the terminlogy to the novices!

  2. DK says:

    This doesn’t work as is. Could you please provide complete example files.

  3. mike says:

    works well! thanks!

  4. Zak says:

    Hey Ram,
    I was trying for the last twenty days to get your code work with eclipse, in fact it works on iOS, but not in android, although i set all the permissions I just can’t find where is the problem!
    Can you please give me the whole android project so I can see where is the problem?
    thanks a lot!

    • Ram Kulkarni says:

      You can download the Android project from here

      • anuradha says:

        we are integrate file chooser app in my phonegap (cordova version 2.9.0) application it displays the file directory ,but file select option is not working it shows file_Browser_params.on_file_select is undefined.
        please give me the reply as soon as possible.

        • Ram Kulkarni says:

          I have already uploaded the complete sample code here. See index.html in assets foder of the project to know how to set parameters. Here is the relevant script block in that file –

          <script type="text/JavaScript">
          	file_Browser_params = new Object()
          	file_Browser_params.on_file_select = function (fileEntry)
          	{
          		$("#fileMsgSpan").html("You selected " + fileEntry.fullPath);
          		return false;
          	}
          </script>
          
  5. Zak says:

    Thanks a lot it works great! Maybe I’ve missed up the project configuration.
    Again thank you.Ram

  6. SangHwa Jung says:

    Hello
    Is there any way to upload from selected File~
    because what i’m gonna do is uploading file from mobileWebPage

    if you knwo plz~ tell me
    Thx~

  7. krishna says:

    Its not listing the folders and files in IOS , working only on android ,how to findout ??
    can u please help me

    • Ram Kulkarni says:

      Each application in iOS has access to its own private folder only, unlike in Android where applications have access to the entire file system. So you won’t see any file/folder in iOS using the sample code I postes, unless your application creates ones.

  8. darmie says:

    Great Tutorial, but can you please give a code sample of how i can select a file and upload it. My phonegap experience is not really good.

    Your help will be appreciated.
    Thanks

    • Ram Kulkarni says:

      I don’t have a sample code ready for uploading file (I am assuming you want to upload to a server). Once you select a file using file chooser dialog, read the file content using PhoneGap file APIs and then send it to a server using XHR. JQuery has utility functions to post data to server.

  9. Manish Kumar says:

    Great Tutorial, I have just tested for android and its working fine.

    Thanks a lot!

  10. PSR says:

    When I am trying to install on my Galaxy S Adavance 4.1.2 Jelly Bean. I am not able to view the directory structure. An alert is displaying with “[Object object]” message.

    Can you identify the problem?

    Thanks in advance.

  11. Aravinth says:

    Nice tutorial. I searched last one week for this one. In this i got file path how to get the file type and its contents. Thank you.

  12. Sander says:

    I tried your android project and it didn’t work. I’m looking to find a workaround for the webview bug that causes the input file type to not work at all. (It’s related to the openfilechooser api which they removed) The newer android project shown (3.3) seems empty. Could you help me with this problem?

    • Sander says:

      I should mention this is on android 4.4.2

    • Ram Kulkarni says:

      Download FileChooser project and unzip it. Open Android Developer Tools (Eclipse). Select menu File->Import. Then select Android->Existing Android Code …
      Click Browse button next to Root Directory text box and select FileChooser/platforms/android and click Open button. You should see two projects (FileChooser and FileChooser-CordovaLib) listed and selected. Click Finish. Run the application on a device or emulator.
      I have tested this on Android 4.2.2 and it works fine.

      • Sander says:

        I’m using the adobe phonegap build service and it didn’t work there.
        I am testing on a Google Nexus 5 32 GB with Android 4.4.2 kitkat.
        It works when I run through adt and copy the apk. Any advice on how to include in build service?

Leave a Reply