Invoke native file browser using 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 tried input type="file", but it is not supported in android 4.4. I tried phonegap camera API too, but it is supported only media files. I found some cordova plugins (exm1,exm2 ). But these plugins using custom UI. I want to invoke native file browser for choosing the file & it has to work in both Android & iPhone platforms. Is there a way to implement the same?

I found cordova file chooser plugin (https://github.com/cdibened/filechooser) would be helpful for android platform, but I am unable to make it work. The success callback function is not immediately getting triggered after the file selection (tested with android 4.4.2). Please find my code below,

<input type="file" id="fileinput" name="fileinput"/>

$("#fileinput").bind('click',function(){ 
    console.log("choose file selected"); 
    filechooser.open( {}, fileChooseSuccess, fileChooseFailed ); 
}); 
function fileChooseSuccess(data) { 
    var filepath = data.filepath; 
    console.log("file path:"+filepath); 
} 
function fileChooseFailed(msg) { 
    console.log(msg); 
}

wbt11a · Answer 1 · 2014-11-12T16:10:00.697

I was able to get your plugin, FileChooser working.

There are certain things that have to be done though. You need to open the following with your editor

FileChooser.java
FileChooserActivity.java
FileListAdapter.java
FileListFragment.java
LocalStorageProvider.java

and append
```
import your.package.name.R;
```
to each of those files.

Here is the demo code I used:

<html>
<head>
    <title>Hello World</title>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript">
    document.addEventListener("deviceready", function(){

        var success = function(data) {
            alert("File chosen: " + data.filepath); 
        };

        var error = function(msg) {
            console.log( msg );
        };

        $('#fileinput').click(function(e) {
            filechooser.open({}, success,error);
        });
     });
    </script>

</head>

<body>
     <input type="file" id="fileinput" name="fileinput"/>
</body>
</html>

Also, be aware that the author intended this to be used in KitKat 4.4.4. It may work with lower versions but he's uncertain.

Take note that the only difference between the HTML5 choice window and this is the "Internal Storage" option.

Hope this helps.

what is the syntax for multiple file select – Karan Bhutwala Dec 26 '15 at 17:23 — Karan Bhutwala, Dec 26 '15 at 17:23

score 0 · Answer 2 · edited May 23 '17 at 12:24

0

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

input file should work on android too (on most of the versions, but it doesn't work on android 4.4, 4.4.1 and 4.4.2) HTML file input in android webview (android 4.4, kitkat)

for iOS there is no plugin, you don't have a native file browser.

Sample project https://github.com/jcesarmobile/FileBrowserAndroidTest

edited May 23 '17 at 12:24

Community

1
1

answered Nov 04 '14 at 15:35

jcesarmobile

51,328
11
132
176

I tried the above plugin (https://github.com/cdibened/filechooser). But I am unable to make it work. Is the first argument for “filechooser.open” is mandatory ? What I have to pass for supporting all file types? In the plugin documentation, its written that “You should change com.ianhanniballake.localstorage.documents in your Manifest, as well as the LocalStorageProvider.AUTHORITY field”. What I have to change? – Sinu Varghese Nov 06 '14 at 07:06
read tobik ansker in the question I linked (http://stackoverflow.com/questions/19882331/html-file-input-in-android-webview-android-4-4-kitkat) – jcesarmobile Nov 06 '14 at 07:27
@jcesammobile, I implemented this plugin, but it is not working as expected. The first success callback function is getting triggered when the user select the second file. Likewise second success callback function is getting triggered when the user select the third file. I am testing with Android 4.4.2. – Sinu Varghese Nov 06 '14 at 09:46
below is my code, $("#fileinput").bind('click',function(){ console.log("choose file selected"); filechooser.open( {}, fileChooseSuccess, fileChooseFailed ); }); function fileChooseSuccess(data) { var filepath = data.filepath; console.log("file path:"+filepath); } function fileChooseFailed(msg) { console.log(msg); } – Sinu Varghese Nov 06 '14 at 11:38
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/64393/discussion-between-sinu-varghese-and-jcesarmobile). – Sinu Varghese Nov 06 '14 at 12:33
did you check my sample project? – jcesarmobile Nov 13 '14 at 13:54

Invoke native file browser using phonegap

2 Answers2

Linked