input type=“file” is not working with phonegap

Question

I have to implement file upload feature in my phonegap project. User should be able to upload any type of file from the phone memory or sd card. The application screens I designed using jQuery Mobile framework. I used the below code to invoke the file browser and for the selection of the file.

<input type="file" />

When I run the app, its showing the 'Choose File' button. But nothing happens when I click on this button. I tested it in different android devices but facing the same issue. The LogCat window is not showing any error or warning messages. Is input type="file" supported in mobile browser? Is there any alternative way to implement the same?

Answer 1

input file does work with phonegap, but there is a bug on some android versions (4.4-4.4.2) HTML file input in android webview (android 4.4, kitkat)

For android you can use this plugin: https://github.com/cdibened/filechooser

Answer 2

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’

    var currPath = "";
    var currEntry = null;

    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(){
            if (file_Browser_params.on_ok == null)
                return;
            file_Browser_params.on_ok(currEntry);
        });         

        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)
                {
                    var ret = file_Browser_params.on_file_select(entryData);
                    if (ret == false) {
                        $('.ui-dialog').dialog('close');
                        return;
                    }
                }
            });
        }
    }

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

    init();