HTML 5 File input with iOS and Android [Cordova/Phonegap]

Question

In a PhoneGap app I tried to use camera using HTML5 input tag like this.

1. create new project using CLI
2. Add iOS and Android platform
3. Add camera plugin
4. build for both devices
5. run on both devices (Actual device IPhone 5 with iOS 7.1.2 and Android 4.4.2 (Samsung Note))

Following is the code line that I tried to execute

<input id="imageHolder" type="file" accept="image/*" capture />

It works in iPhone but not in Android. What have I missed? Or is this not supported in Android? After tapping on the field in Android nothing happens while in iPhone it acts like below

Answer 1

I see this is an old question, but the answer is not using HTML but JavaScript and a cordova plugin.

I used this plugin

Quite easy to use.

Example:

if (device.platform == "Android") { //Here we check to see what OS is used. input with type file is supported on iOS, but not Android. So use plugin for Android
    fileStorage.open(function (uri) {
        if (callback) {
            callback(uri);
        }
        return uri;
    }, function (ex) {
        throw ex;
    });
} else {
    var file = document.createElement("input");
    file.type = "file";
    file.accept = ".pdf";
    file.style.display = "none";

    document.body.appendChild(file);
    file.click();

    file.onchange = function (f) {
        console.log(f);

        console.log(file.files);

        var reader = new FileReader()

        reader.readAsDataURL(file.files[0]);

        reader.onloadend = function () {
            if (callback) {
                callback(reader.result);
            }

            return reader.result;
        }

        document.body.removeChild(file);
    }
}