3

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?

Omar
  • 32,302
  • 9
  • 69
  • 112
Sinu Varghese
  • 800
  • 1
  • 14
  • 39
  • possible duplicate of [How to browse and select a file from sdcard using Phonegap 3.0?](http://stackoverflow.com/questions/18374600/how-to-browse-and-select-a-file-from-sdcard-using-phonegap-3-0) – Shoaib Chikate Nov 04 '14 at 12:38
  • @ShoaibChikate the possible duplicate solution is having a custom UI. I want to invoke the native file browser. – Sinu Varghese Nov 04 '14 at 13:19
  • possible duplicate of [HTML file input in android webview (android 4.4, kitkat)](http://stackoverflow.com/questions/19882331/html-file-input-in-android-webview-android-4-4-kitkat) – jcesarmobile Nov 04 '14 at 15:38
  • You don't say which OS or OS version you're targeting. HTML5 in phonegap strongly depends on the support of the browser used for the webview. File API is fully supported for android only since Kit Kat http://caniuse.com/#feat=fileapi – QuickFix Nov 04 '14 at 18:19

2 Answers2

3

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

Community
  • 1
  • 1
jcesarmobile
  • 51,328
  • 11
  • 132
  • 176
0

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();
Shoaib Chikate
  • 8,665
  • 12
  • 47
  • 70