Posted on by Ram

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

44 Replies to “File Chooser Dialog for PhoneGap Applications”

      1. I have used the code exactly as you have and i still cannot browse on the device. Are there additional permissions etc that need to be set? I am using an iPhone 4S running iOS 6, Cordova 2.2.0rc1, jQuery mobile-1.2.0

        Reply

  4. 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!

    Reply

      1. 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.

        Reply

        1. 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>
          Reply

  6. 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~

    Reply

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

    Reply

    1. 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.

      Reply

  8. 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

    Reply

    1. 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.

      Reply

  10. 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.

    Reply

  11. 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.

    Reply

          1. Check JS console for any errors. Also you may want to set file_Browser_params.initial_folder = null before showing the file chooser dialog.

          2. First Thanks for your quick reply Ram,

            There is no error in Console. I need to create a variable and set like
            var file_Browser_params.initial_folder = null ; Because it is already present in init function.

          1. It is not about which file you pick, I guess, but what you do after that. If you are trying to read a large file then application may be running out of memory

          1. I haven’t implemented multiple file selection. But it is not too difficult. I guess you can modify the source code to support this.

  12. 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?

    Reply

    2. 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.

      Reply

      1. 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?

        Reply

  15. Hi kulkarni

    very nice artical but can you tell me how to read/write files from external SD card if its available.

    Thanks
    Nouman.

    Reply

  17. Thanks for such a good article and also working fine in android and ios, but in ios it will shows only NoCloud directory, how to change a root directory to applicationStorageDirectory path ?

    Reply

Leave a Reply

Social