How to pick(choose) multiple files at the same time in phonegap

Question

I googled and search here i didn\'t find any opted solution relates to multiple file picker or chooser in phonegap. Currently i am able pick single file at a time in phonega

Answer 1

Please try this:

Download this demo..

http://ramkulkarni.com/temp/2012-04-09/FileChooser_PG_3_3.zip

Replce this on index.html

    file_Browser_params = new Object()
    file_Browser_params.on_file_select = function (fileEntry)
    {
        //$("#fileMsgSpan").html("You selected " + fileEntry.fullPath);
        $("#fileMsgSpan").html("You selected " + fileEntry);
        return false;
    }

Replace all filebrowser.html with this code

    <!--
        Author : Ram Kulkarni
                 http://ramkulkarni.com
    -->

    <div data-role="dialog" id="rk_file_dialog">

        <style media="screen" type="text/css">
            .file_icon{
                font-size:x-large;
                font-weight:bolder;
                background-color:#AAA;
                vertical-align:top; 
            }

            .small_btn {
                font-size:medium;
            }   

            .file_list_row {
                font-size:x-large;
            }
        </style>


        <script language="JavaScript">
            var currPath = "";
            var currEntry = null;
            var totalfile =[];

            if (typeof file_Browser_params == 'undefined')
                file_Browser_params = new Object();

            if (typeof file_Browser_params.directory_browser != 'boolean')
                file_Browser_params.directory_browser = false;

            if (typeof file_Browser_params.on_folder_select != 'function')
                file_Browser_params.on_folder_select = null;

            if (typeof file_Browser_params.on_file_select != 'function')
                file_Browser_params.on_file_select = null;

            if (typeof file_Browser_params.on_ok != 'function')
                file_Browser_params.on_ok = null;

            if (typeof file_Browser_params.new_file_btn == 'undefined')
                file_Browser_params.new_file_btn = true;

            if (typeof file_Browser_params.new_folder_btn == 'undefined')
                file_Browser_params.new_folder_btn = true;

            function init()
            {
                if (!file_Browser_params.new_file_btn)
                    $("#new_file_btn").hide();

                if (!file_Browser_params.new_folder_btn)
                    $("#new_dir_btn").hide();

                $("#new_file_btn").click(function(){
                    if (currEntry == null)
                        return;
                    var fileName = prompt("Enter File Name","untitled.txt");
                    if (fileName == null || fileName == '')
                        return;
                    currEntry.getFile(fileName,{create:false},function(){
                        alert("File already exists");
                    }, 
                    function(){
                        currEntry.getFile(fileName,{create:true}, function(){
                            //refresh current folder
                            getEntries(currEntry);
                        }, function(){
                            alert("Error creating file " + fileName);
                        });
                    });
                });

                $("#new_dir_btn").click(function(){
                    if (currEntry == null)
                        return;
                    var fileName = prompt("Enter Folder Name","untitled");
                    if (fileName == null || fileName == '')
                        return;
                    currEntry.getDirectory(fileName,{create:false},function(){
                        alert("Folder already exists");
                    }, 
                    function(){
                        currEntry.getDirectory(fileName,{create:true}, function(){
                            //refresh current folder
                            getEntries(currEntry);
                        }, function(){
                            alert("Error creating file " + fileName);
                        });
                    });
                });

                $("#file_browser_ok").click(function(){

                    var allurl="";
                    if(totalfile.length >0){
                        for(var j =0;j<totalfile.length;j++){
                            allurl += totalfile[j]+'<br>';
                        }
                    }
                    console.log(allurl);
                    file_Browser_params.on_file_select(allurl);

                });         

                if (typeof file_Browser_params.initial_folder == 'undefined' ||
                    file_Browser_params.initial_folder == null)
                {
                    file_Browser_params.initial_folder = null;
                    getRootAndDisplay();
                } 
                else
                {
                    getEntries(file_Browser_params.initial_folder);
                }
            }

            function getRootAndDisplay()
            {
                getRoot(function(dirEntry){
                    try {
                        getEntries(dirEntry);
                    } catch (err)
                    {
                        alertError(err);
                    }
                });
            }

            function getRoot(onGetRoot)
            {       
                if (typeof window.requestFileSystem != 'undefined') {
                    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem){
                        if (typeof onGetRoot != 'undefined')
                            onGetRoot(fileSystem.root);
                    }, function(){
                        log("Error accessing local file system");
                    });
                }

                return null;
            }

            function upOneLevel()
            {
                if (currEntry == null)
                    return;
                currEntry.getParent(function(parentArg){
                    getEntries(parentArg);
                }, function(error){
                    alert("Error getting parent folder");
                })
            }

            function getEntries(dirEntry)
            {
                if (dirEntry == null)
                    return;

                currPath = dirEntry.fullPath;
                currEntry = dirEntry;
                $("#curr_folder").html(currPath);
                var dirReader = dirEntry.createReader();
                dirReader.readEntries(function(entries){
                    displayEntries(entries);            
                }, function(err){
                    if (typeof err.message != 'undefined')
                        err = err.message;
                    alert(err); 
                });
            }

            function displayEntries(entriesArray)
            {
                entriesArray.sort(function(a,b){
                    var str1 = a.name.toLowerCase();
                    var str2 = b.name.toLowerCase();
                    if (str1 < str2)
                        return -1;
                    if (str1 > str2)
                        return 1;
                    return 0;
                });             

                $("#fileBrowser_entries").empty();
                var table = $("<table id='file_entry_table'></table>").appendTo("#fileBrowser_entries");

                var row = $("<tr class='file_list_row'><td class='file_icon'>D</td><td>..</td></tr>").appendTo(table);
                $(row).click(function(event){
                    upOneLevel();
                });

                for (var i in entriesArray)
                {
                    var isFolder = entriesArray[i].isDirectory;
                    var name = entriesArray[i].name;

                    if (file_Browser_params.directory_browser && !isFolder)
                        continue;

                    var row = $("<tr class='file_list_row'></tr>").appendTo(table);
                    $(row).data("entry", entriesArray[i]);
                    $("<td class='file_icon'>" + (isFolder ? 'D' : 'F') + "</td>").appendTo(row);
                    $("<td class='file_name'>" + name + "</td>").appendTo(row);
                    $(row).click(function(event){
                        var entryData = $(this).data("entry");
                        if (entryData.isDirectory) {
                            if (file_Browser_params.on_folder_select != null)
                            {
                                var ret = file_Browser_params.on_folder_select(entryData);
                                if (ret == false) {
                                    $('.ui-dialog').dialog('close');
                                    return;
                                }
                            }
                            getEntries(entryData);
                        } else if (file_Browser_params.on_file_select != null)
                        {

                            // console.log(entryData.fullPath);
                            // totalfile.push(entryData.fullPath);

                            var found = jQuery.inArray(entryData.fullPath, totalfile);
                            if (found >= 0) {
                                // Element was found, remove it.
                                totalfile.splice(found, 1);
                            } else {
                                // Element was not found, add it.
                                totalfile.push(entryData.fullPath);
                            }



                        }
                    });
                }
            }

            function alertError(err){
                if (typeof err.message != 'undefined')
                    err = err.message;
                alert(err);
            }

            init();
        </script>
        <div data-role="header">
            <h2>File Chooser</h2>
        </div>
        <div data-role="content">
            <b><span id="curr_folder"></span></b><br/>
            <a href="#" data-role="button" data-inline="true" id="new_file_btn" data-theme="b" class="small_btn">New File</a>
            <a href="#" data-role="button" data-inline="true" id="new_dir_btn" data-theme="b" class="small_btn">New Dir</a>

            <div id="fileBrowser_entries"></div>

            <a href="#" id="file_browser_ok" data-role="button" data-rel="back" data-theme="b" data-inline="true" id="file_browser_ok">OK</a>       
            <a href="#" data-role="button" data-rel="back" data-theme="b" data-inline="true" id="file_browser_cancel">Cancel</a>       
        </div>
    </div>