{"id":123,"date":"2012-04-09T14:26:59","date_gmt":"2012-04-09T08:56:59","guid":{"rendered":"http:\/\/ramkulkarni.com\/blog\/?p=123"},"modified":"2012-04-09T14:26:59","modified_gmt":"2012-04-09T08:56:59","slug":"file-chooser-dialog-for-phonegap-application","status":"publish","type":"post","link":"http:\/\/ramkulkarni.com\/blog\/file-chooser-dialog-for-phonegap-application\/","title":{"rendered":"File Chooser Dialog for PhoneGap Applications"},"content":{"rendered":"<p>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 <a title=\"Annotated Call Log\" href=\"https:\/\/market.android.com\/details?id=ram.kulkarni.calllog&amp;hl=en\">Annotated Call Log<\/a>. However I did not want to use that for my current application, because it needs to run on iOS too.<\/p>\n<p>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 <strong><a title=\"PhoneGap File Chooser Dialog\" href=\"http:\/\/ramkulkarni.com\/temp\/2012-04-09\/fileBrowser.html\">here<\/a><\/strong>. The page won&#8217;t display much in the browser. Use &#8216;View Source&#8217; of your browser to see the source code.<br \/>\n<!--more--><br \/>\nWhen I used this in my mobile application, it looks like this &#8211;<\/p>\n<figure id=\"attachment_124\" aria-describedby=\"caption-attachment-124\" style=\"width: 320px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/i0.wp.com\/138.197.85.232\/blog\/wp-content\/uploads\/2012\/04\/phonegap_file_chooser.png\"><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"124\" data-permalink=\"http:\/\/ramkulkarni.com\/blog\/file-chooser-dialog-for-phonegap-application\/phonegap_file_chooser\/\" data-orig-file=\"https:\/\/i0.wp.com\/ramkulkarni.com\/blog\/wp-content\/uploads\/2012\/04\/phonegap_file_chooser.png?fit=457%2C453\" data-orig-size=\"457,453\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"phonegap_file_chooser\" data-image-description=\"&lt;p&gt;Screen shot of PhoneGap File Chooser Dialog&lt;\/p&gt;\n\" data-image-caption=\"&lt;p&gt;PhoneGap File Chooser Dialog&lt;\/p&gt;\n\" data-medium-file=\"https:\/\/i0.wp.com\/ramkulkarni.com\/blog\/wp-content\/uploads\/2012\/04\/phonegap_file_chooser.png?fit=300%2C297\" data-large-file=\"https:\/\/i0.wp.com\/ramkulkarni.com\/blog\/wp-content\/uploads\/2012\/04\/phonegap_file_chooser.png?fit=457%2C453\" class=\" wp-image-124  \" title=\"phonegap_file_chooser\" src=\"https:\/\/i0.wp.com\/138.197.85.232\/blog\/wp-content\/uploads\/2012\/04\/phonegap_file_chooser.png?resize=320%2C317\" alt=\"PhoneGap File Chooser Dialog\" width=\"320\" height=\"317\" srcset=\"https:\/\/i0.wp.com\/ramkulkarni.com\/blog\/wp-content\/uploads\/2012\/04\/phonegap_file_chooser.png?w=457 457w, https:\/\/i0.wp.com\/ramkulkarni.com\/blog\/wp-content\/uploads\/2012\/04\/phonegap_file_chooser.png?resize=150%2C150 150w, https:\/\/i0.wp.com\/ramkulkarni.com\/blog\/wp-content\/uploads\/2012\/04\/phonegap_file_chooser.png?resize=300%2C297 300w, https:\/\/i0.wp.com\/ramkulkarni.com\/blog\/wp-content\/uploads\/2012\/04\/phonegap_file_chooser.png?resize=100%2C100 100w\" sizes=\"(max-width: 320px) 100vw, 320px\" data-recalc-dims=\"1\" \/><\/a><figcaption id=\"caption-attachment-124\" class=\"wp-caption-text\">PhoneGap File Chooser Dialog<\/figcaption><\/figure>\n<p>The current path is displayed at the top. The first entry in the file list is to go up one level.<\/p>\n<p>I have made it configurable so that you can specify &#8211;<\/p>\n<ul>\n<li>If new file and or folder buttons should be displayed<\/li>\n<li>Set initial folder. This has to be DirectoryEntry<\/li>\n<li>If only folders to be displayed (for Directory Browser)<\/li>\n<li>Callback functions for file selection and directory selection. If you return false from these callback functions, then dialog is closed.<\/li>\n<li>Callback handler when OK is clicked. The argument to the callback function is currently selected DirectoryEntry in the dialog box.<\/li>\n<\/ul>\n<p>All these parameter should be set in an Object called &#8216;file_Browser_params&#8217;<\/p>\n<p>How to use this<\/p>\n<p>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 &#8211;<\/p>\n<pre style=\"color: #000000; background: #f1f0f0;\"><span style=\"color: #806030;\">&lt;<\/span>a href<span style=\"color: #806030;\">=<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">fileBrowser.html<\/span><span style=\"color: #800000;\">\"<\/span> id<span style=\"color: #806030;\">=<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">browseBtn<\/span><span style=\"color: #800000;\">\"<\/span> data<span style=\"color: #806030;\">-<\/span>role<span style=\"color: #806030;\">=<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">button<\/span><span style=\"color: #800000;\">\"<\/span>\n   data<span style=\"color: #806030;\">-<\/span>inline<span style=\"color: #806030;\">=<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">true<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #806030;\">&gt;<\/span>Browse<span style=\"color: #806030;\">&lt;<\/span><span style=\"color: #806030;\">\/<\/span>a<span style=\"color: #806030;\">&gt;<\/span><\/pre>\n<p>Then set parameters for the file chooser just before displaying it. You can do that by handling click event for &#8216;browseBtn&#8217;<\/p>\n<pre style=\"color: #000000; background: #f1f0f0;\">$<span style=\"color: #806030;\">(<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #e60000;\">#browseBtn<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">.<\/span>click<span style=\"color: #806030;\">(<\/span><span style=\"color: #400000; font-weight: bold;\">function<\/span><span style=\"color: #806030;\">(<\/span><span style=\"color: #806030;\">)<\/span><span style=\"color: #806030;\">{<\/span>\n    <span style=\"color: #c34e00;\">\/\/check if last selected folder was set<\/span>\n    <span style=\"color: #400000; font-weight: bold;\">if<\/span> <span style=\"color: #806030;\">(<\/span><span style=\"color: #400000; font-weight: bold;\">typeof<\/span> lastFolderSelected <span style=\"color: #806030;\">==<\/span> <span style=\"color: #e60000;\">'undefined'<\/span><span style=\"color: #806030;\">)<\/span>\n        lastFolderSelected <span style=\"color: #806030;\">=<\/span> <span style=\"color: #0f4d75;\">null<\/span><span style=\"color: #806030;\">;<\/span>\n\n    <span style=\"color: #c34e00;\">\/\/create file chooser dialog parameters<\/span>\n    file_Browser_params <span style=\"color: #806030;\">=<\/span> <span style=\"color: #806030;\">{<\/span>\n        directory_browser <span style=\"color: #806030;\">:<\/span> <span style=\"color: #0f4d75;\">false<\/span><span style=\"color: #806030;\">,<\/span> <span style=\"color: #c34e00;\">\/\/this is file browser. Default is false<\/span>\n\n        new_file_btn <span style=\"color: #806030;\">:<\/span> <span style=\"color: #0f4d75;\">true<\/span><span style=\"color: #806030;\">,<\/span> <span style=\"color: #c34e00;\">\/\/show new file button. Default is true<\/span>\n\n        new_folder_btn <span style=\"color: #806030;\">:<\/span> <span style=\"color: #0f4d75;\">true<\/span><span style=\"color: #806030;\">,<\/span> <span style=\"color: #c34e00;\">\/\/shoe new folder button. Default is true<\/span>\n\n        initial_folder <span style=\"color: #806030;\">:<\/span> lastFolderSelected<span style=\"color: #806030;\">,<\/span> <span style=\"color: #c34e00;\">\/\/initial folder when dialog is displayed<\/span>\n\n        <span style=\"color: #c34e00;\">\/\/callback function when file is selected<\/span>\n        on_file_select <span style=\"color: #806030;\">:<\/span> <span style=\"color: #400000; font-weight: bold;\">function<\/span><span style=\"color: #806030;\">(<\/span>fileEntry<span style=\"color: #806030;\">)<\/span> <span style=\"color: #806030;\">{<\/span>\n            <span style=\"color: #400000; font-weight: bold;\">return<\/span> <span style=\"color: #0f4d75;\">false<\/span><span style=\"color: #806030;\">;<\/span> <span style=\"color: #c34e00;\">\/\/close dialog when any file is selected (tapped)<\/span>\n        <span style=\"color: #806030;\">}<\/span><span style=\"color: #806030;\">,<\/span>\n\n        <span style=\"color: #c34e00;\">\/\/callback function when folder is selected<\/span>\n        on_folder_select <span style=\"color: #806030;\">:<\/span> <span style=\"color: #400000; font-weight: bold;\">function<\/span><span style=\"color: #806030;\">(<\/span>dirEntry<span style=\"color: #806030;\">)<\/span> <span style=\"color: #806030;\">{<\/span>\n            <span style=\"color: #c34e00;\">\/\/don't do anything<\/span>\n        <span style=\"color: #806030;\">}<\/span><span style=\"color: #806030;\">,<\/span>\n\n        <span style=\"color: #c34e00;\">\/\/callback function when OK button is clicked<\/span>\n        on_ok <span style=\"color: #806030;\">:<\/span> <span style=\"color: #400000; font-weight: bold;\">function<\/span> <span style=\"color: #806030;\">(<\/span>dirEntry<span style=\"color: #806030;\">)<\/span> <span style=\"color: #806030;\">{<\/span>\n            <span style=\"color: #c34e00;\">\/\/save the last folder path<\/span>\n            lastFolderSelected <span style=\"color: #806030;\">=<\/span> dirEntry<span style=\"color: #806030;\">;<\/span>\n        <span style=\"color: #806030;\">}<\/span>\n<span style=\"color: #806030;\">}<\/span><span style=\"color: #806030;\">;<\/span><\/pre>\n<p>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.<\/p>\n<p>-Ram Kulkarni<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/ramkulkarni.com\/blog\/file-chooser-dialog-for-phonegap-application\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;File Chooser Dialog for PhoneGap Applications&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[3,10,1],"tags":[2,12,13],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p2g9O8-1Z","jetpack-related-posts":[],"_links":{"self":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/123"}],"collection":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/comments?post=123"}],"version-history":[{"count":0,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/123\/revisions"}],"wp:attachment":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/media?parent=123"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/categories?post=123"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/tags?post=123"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}