# Recommended Android/IOS file chooser plugin

**URL:** <https://forum.ionicframework.com/t/recommended-android-ios-file-chooser-plugin/20761>\
**Category:** ionic-v1\
**Created:** [April 11, 2015, 11:23am UTC](https://forum.ionicframework.com/t/recommended-android-ios-file-chooser-plugin/20761 "2015-04-11T11:23:37Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![snailred](https://avatars.discourse-cdn.com/v4/letter/s/c89c15/32.png) [@snailred](https://forum.ionicframework.com/u/snailred)\
**Post date:** [April 11, 2015, 11:23am UTC](https://forum.ionicframework.com/t/recommended-android-ios-file-chooser-plugin/20761/1 "2015-04-11T11:23:37Z")

</div>

Hi all,

My apps need choose file pdf, docx, excel,… and upload to server.

I have search and find some plugins:

> **[cdibened/filechooser](https://github.com/cdibened/filechooser)**
>
> filechooser - Cordova plugin to get around Android's removal of html file upload

  

> **[don/cordova-filechooser](https://github.com/don/cordova-filechooser)**
>
> cordova-filechooser - Cordova Plugin that supplies a File Chooser

but don’t support IOS.

Can you recommended plugin?

Thank you so much!

---

<div class="post-metadata">

**Author:** ![snailred](https://avatars.discourse-cdn.com/v4/letter/s/c89c15/32.png) [@snailred](https://forum.ionicframework.com/u/snailred)\
**Post date:** [April 11, 2015, 3:27pm UTC](https://forum.ionicframework.com/t/recommended-android-ios-file-chooser-plugin/20761/2 "2015-04-11T15:27:41Z")

</div>

please help @mhartington

---

<div class="post-metadata">

**Author:** ![daldegam](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/daldegam/32/84025_2.png) [@daldegam](https://forum.ionicframework.com/u/daldegam)\
**Post date:** [September 2, 2015, 1:12pm UTC](https://forum.ionicframework.com/t/recommended-android-ios-file-chooser-plugin/20761/3 "2015-09-02T13:12:51Z")

</div>

I have same question!  
Anybody reply please!  
@snailred @mhartington

Thanks

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [September 2, 2015, 2:08pm UTC](https://forum.ionicframework.com/t/recommended-android-ios-file-chooser-plugin/20761/4 "2015-09-02T14:08:39Z")

</div>

Well either plugin will work for android so you can use which ever you want.  
For iOS, you sadly don’t have a file browser/chooser.  
Not going to be possible sadly.

---

<div class="post-metadata">

**Author:** ![leob](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/leob/32/14245_2.png) [@leob](https://forum.ionicframework.com/u/leob)\
**Post date:** [September 12, 2015, 7:15am UTC](https://forum.ionicframework.com/t/recommended-android-ios-file-chooser-plugin/20761/6 "2015-09-12T07:15:07Z")

</div>

Apparently there’s this one, haven’t tried it and sadly it’s only for iOS8 (and higher?):

> **[jcesarmobile/FilePicker-Phonegap-iOS-Plugin](https://github.com/jcesarmobile/FilePicker-Phonegap-iOS-Plugin)**
>
> FilePicker-Phonegap-iOS-Plugin - This plugin makes possible to pick files from iCloud or other document providers

Anyway I suppose that if you understand the physical file system structure of iOS and you have the time then you could always build a UI yourself using the Cordova File plugin. Don’t know about iCloud and so on though.

By the way I tried [https://github.com/don/cordova-filechooser](https://github.com/don/cordova-filechooser) and it worked perfectly.

The other one ([https://github.com/cdibened/filechooser](https://github.com/cdibened/filechooser)) seems more complicated to set up and gave me build errors on my initial attempt, so I went with the other one.

---

<div class="post-metadata">

**Author:** ![praveenjp](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/praveenjp/32/97582_2.png) [@praveenjp](https://forum.ionicframework.com/u/praveenjp)\
**Post date:** [October 15, 2015, 7:40am UTC](https://forum.ionicframework.com/t/recommended-android-ios-file-chooser-plugin/20761/7 "2015-10-15T07:40:24Z")

</div>

Hi @leob,

please share some code for how to use **cordova-filechooser** in ionic.

---

<div class="post-metadata">

**Author:** ![leob](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/leob/32/14245_2.png) [@leob](https://forum.ionicframework.com/u/leob)\
**Post date:** [October 15, 2015, 3:03pm UTC](https://forum.ionicframework.com/t/recommended-android-ios-file-chooser-plugin/20761/8 "2015-10-15T15:03:52Z")

</div>

Well I’ve done it like this, this should work on Android and on iOS but I’ve only tested it on Android:

```auto
      function checkFileType(path, fileExt) {
        return path.match(new RegExp(fileExt + '$', 'i'));
      }

      function chooseFileOk(deferred, uri, fileExt) {
        $log.debug('FileManager#chooseFile - uri: ' + uri + ', fileType: ' + fileExt);

        if (!checkFileType(uri, fileExt)) {
          deferred.reject('wrong_file_type');
        } else {
          deferred.resolve(uri);
        }
      }

      function chooseFileError(deferred, source) {
        $log.debug('FileManager#chooseFile - ' + source + ' error: ' + JSON.stringify(error));

        // assume operation cancelled
        deferred.reject('cancelled');
      }

      var chooseFile = function (fileExt) {
        var deferred = $q.defer();

        // iOS (NOTE - only iOS 8 and higher): https://github.com/jcesarmobile/FilePicker-Phonegap-iOS-Plugin
        if (ionic.Platform.isIOS()) {

          FilePicker.pickFile(
            function (uri) {
              chooseFileOk(deferred, uri, fileExt);
            },
            function (error) {
              chooseFileError(deferred, 'FilePicker');
            }
          );

        // Android: https://github.com/don/cordova-filechooser
        } else {

          fileChooser.open(
            function (uri) {
              chooseFileOk(deferred, uri, fileExt);
            },
            function (error) {
              chooseFileError(deferred, 'fileChooser');
            }
          );
        }

```

The main function is called “chooseFile” and I can pass it a “fileExt” parameter to restrict the kind of files that can be selected (e.g. only ‘pdf’ files).

Typically you’d package the function inside a service. It returns a promise so you then use it like:

```auto
   FilePickerService.chooseFile('.pdf').then(function(url) {
       // do something with the selected file
   }).catch(error) {
       // something wrong, log it or show a message
   });

```

The code uses 2 plugins: FilePicker for iOS and fileChooser for Android. Install them as follows:

```auto
ionic plugin add https://github.com/jcesarmobile/FilePicker-Phonegap-iOS-Plugin.git
ionic plugin add https://github.com/don/cordova-filechooser

```

Does that make sense?

---

<div class="post-metadata">

**Author:** ![wangliwen998](https://avatars.discourse-cdn.com/v4/letter/w/f475e1/32.png) [@wangliwen998](https://forum.ionicframework.com/u/wangliwen998)\
**Post date:** [January 29, 2016, 2:09am UTC](https://forum.ionicframework.com/t/recommended-android-ios-file-chooser-plugin/20761/9 "2016-01-29T02:09:40Z")

</div>

can you now tell if filechooser for ios is workable anyway ?

---

<div class="post-metadata">

**Author:** ![loku04](https://avatars.discourse-cdn.com/v4/letter/l/5e9695/32.png) [@loku04](https://forum.ionicframework.com/u/loku04)\
**Post date:** [February 29, 2016, 10:18am UTC](https://forum.ionicframework.com/t/recommended-android-ios-file-chooser-plugin/20761/10 "2016-02-29T10:18:58Z")

</div>

Thanks for sharing such a nice solution…  
I faced Issue in Pdf filtering in above script. In android file extension was not available in uri. to solve this issue I used `cordova-plugin-filepath` for getting native file path.  
1 plugin used.  
`cordova plugin add cordova-plugin-filepath`  
I modified function chooseFileOk() see below …

` function chooseFileOk(deferred, uri, fileExt) {  
$log.debug('FileManager#chooseFile - uri: ’ + uri + ', fileType: ’ + fileExt);

```
                window.FilePath.resolveNativePath(uri, function(localFileUri) {
                    if(localFileUri!= 'undefined' && localFileUri!="" )
                    {
                        if(localFileUri.match(new RegExp(fileExt + '$', 'i'))){
                            console.log("This must execute.....");
                            deferred.resolve(uri);
                        }else{
                            deferred.reject('wrong_file_type');
                        }
                    }else{
                        deferred.reject('URI NOT Resulted to any File in system');
                    }
                });
        }`

```

Thanks.

---

<div class="post-metadata">

**Author:** ![gjoris](https://avatars.discourse-cdn.com/v4/letter/g/e9a140/32.png) [@gjoris](https://forum.ionicframework.com/u/gjoris)\
**Post date:** [May 30, 2016, 7:03am UTC](https://forum.ionicframework.com/t/recommended-android-ios-file-chooser-plugin/20761/11 "2016-05-30T07:03:31Z")

</div>

As an addition to this post, the original cordova-plugin-filepath does not work on Android 6, due to the permission system.

I forked the code, and updated the plugin, although it requires Cordova 6.0.0 now (originally, it required Cordova 3.4.0).

Version 1 of the updated plugin can be found at:

> **[gjoris/cordova-filepath-resolver](https://github.com/gjoris/cordova-filepath-resolver)**
>
> cordova-filepath-resolver - Resolve native file paths from content URLs for Cordova platforms

Installation:

Either:  
`cordova plugin add cordova-filepath-resolver`

Or:  
`ionic plugin add cordova-filepath-resolver`

… whichever you prefer.

[EDIT] Plugin is in the repo’s now, updated the links

---

<div class="post-metadata">

**Author:** ![anivaishu](https://avatars.discourse-cdn.com/v4/letter/a/d26b3c/32.png) [@anivaishu](https://forum.ionicframework.com/u/anivaishu)\
**Post date:** [October 19, 2016, 6:10pm UTC](https://forum.ionicframework.com/t/recommended-android-ios-file-chooser-plugin/20761/12 "2016-10-19T18:10:03Z")

</div>

hi leob,

I use this code.but i get following error

filechooser.chooseFileok is not a function

How can i access only audio files in both internel and externel storage using fileChooser plugin.

Please Advice me…

Thanks & Regards,

---

<div class="post-metadata">

**Author:** ![leob](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/leob/32/14245_2.png) [@leob](https://forum.ionicframework.com/u/leob)\
**Post date:** [October 20, 2016, 2:22am UTC](https://forum.ionicframework.com/t/recommended-android-ios-file-chooser-plugin/20761/13 "2016-10-20T02:22:43Z")

</div>

Probably you didn’t install the Cordova plugins then? You need to do:

```auto
ionic plugin add https://github.com/jcesarmobile/FilePicker-Phonegap-iOS-Plugin.git
ionic plugin add https://github.com/don/cordova-filechooser

```

I think that’s the reason for the “missing function”.

And regarding the audio files, you can set file name filters on the plugin.

---

<div class="post-metadata">

**Author:** ![anivaishu](https://avatars.discourse-cdn.com/v4/letter/a/d26b3c/32.png) [@anivaishu](https://forum.ionicframework.com/u/anivaishu)\
**Post date:** [October 20, 2016, 5:27am UTC](https://forum.ionicframework.com/t/recommended-android-ios-file-chooser-plugin/20761/14 "2016-10-20T05:27:34Z")

</div>

hi leob,

again i reinstall plugin  
ionic plugin add [https://github.com/jcesarmobile/FilePicker-Phonegap-iOS-Plugin.git](https://github.com/jcesarmobile/FilePicker-Phonegap-iOS-Plugin.git)  
ionic plugin add [https://github.com/don/cordova-filechooser](https://github.com/don/cordova-filechooser)

This is my code

MediaSrv.chooseFile(’.mp3’).then(function(url) {  
console.log(url);  
});

and

app.factory(“MediaSrv”, function($q) {  
var deferred = $q.defer();

```
function checkFileType(path, fileExt) {
    return path.match(new RegExp(fileExt + '$', 'i'));
  }
  function chooseFileOk(deferred, uri, fileExt) {
    $log.debug('FileManager#chooseFile - uri: ' + uri + ', fileType: ' + fileExt);

    if (!checkFileType(uri, fileExt)) {
      deferred.reject('wrong_file_type');
    } else {
      deferred.resolve(uri);
    }
  }
  function chooseFileError(deferred, source) {
    $log.debug('FileManager#chooseFile - ' + source + ' error: ' + JSON.stringify(error));

    // assume operation cancelled
    deferred.reject('cancelled');
  }
 var chooseFile = function (fileExt) {
    //function chooseFile(fileExt){
   var deferred = $q.defer();

    // iOS (NOTE - only iOS 8 and higher): https://github.com/jcesarmobile/FilePicker-Phonegap-iOS-Plugin
      if (ionic.Platform.isIOS()) {

      FilePicker.pickFile(
        function (uri) {
          chooseFileOk(deferred, uri, fileExt);
        },
        function (error) {
          chooseFileError(deferred, 'FilePicker');
        }
      );

    // Android: https://github.com/don/cordova-filechooser
    } else {

      fileChooser.open(
        function (uri) {
          chooseFileOk(deferred, uri, fileExt);
        },
        function (error) {
          chooseFileError(deferred, 'fileChooser');
        }
      );

```

}  
}

```
    return deferred.promise;

```

});  
But Still i get MediaSrv.chooseFileok is not a function error

Pls help me

Thanks& Regards,

---

<div class="post-metadata">

**Author:** ![leob](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/leob/32/14245_2.png) [@leob](https://forum.ionicframework.com/u/leob)\
**Post date:** [October 20, 2016, 5:54am UTC](https://forum.ionicframework.com/t/recommended-android-ios-file-chooser-plugin/20761/15 "2016-10-20T05:54:57Z")

</div>

The definition of your factory looks a bit weird.

Why does your factory start with declaring a deferred, and end with returning a deferred? And the function ‘chooseFile’ itself isn’t exported from the factory. Maybe that’s the reason why it says “chooseFileOk” unknown.

Have a look at my implementation:

```auto
;(function () {
  "use strict";

  angular.module('app.image')

    //
    // https://github.com/apache/cordova-plugin-file
    // http://www.raymondcamden.com/2014/08/18/PhoneGapCordova-Example-Getting-File-Metadata-and-an-update-to-the-FAQ
    // http://www.html5rocks.com/en/tutorials/file/filesystem/
    // http://community.phonegap.com/nitobi/topics/dataurl_to_png
    //

    .factory('FileManager', function ($q, $log, $cordovaFile, $cordovaFileTransfer) {

      var downloadFile = function(sourceURI, targetDir, targetFile) {

        var deferred = $q.defer();

        $log.debug("FileManager#downloadFile source (original): '" + sourceURI + "'");
        sourceURI = decodeURI(sourceURI);

        var targetPath = targetDir + targetFile;
        var trustHosts = true;
        var options = {};

        $cordovaFileTransfer.download(sourceURI, targetPath, options, trustHosts).then(
          function(result) {
            deferred.resolve(result);

          }, function(error) {
            deferred.reject(error);

          }, function (progress) {
            //$timeout(function () {
            // $scope.downloadProgress = (progress.loaded / progress.total) * 100;
            //})
          });

        return deferred.promise;
      };

      var getFileInfo = function (baseDir, filePath) {
        var deferred = $q.defer();

        $log.debug("FileManager#checkFile baseDir = '" + baseDir + "', filePath = '" + filePath + "'");

        $cordovaFile.checkFile(baseDir, filePath).then(
          function (fileEntry) {
            fileEntry.getMetadata(
              function (result) {
                deferred.resolve(result);
              },
              function (error) {
                deferred.reject(error);
              }
            );
          },
          function (error) {
            deferred.reject(error);
          }
        );

        return deferred.promise;
      };

      var removeFile = function (baseDir, filePath) {
        $log.debug("FileManager#removeFile baseDir = '" + baseDir + "', filePath = '" + filePath + "'");

        return $cordovaFile.removeFile(baseDir, filePath);
      };

      //function checkFileType(path, fileExt) {
      // return path.match(new RegExp(fileExt + '$', 'i'));
      //}

      var checkFileType = function (uri, fileType) {
        var deferred = $q.defer();

        $log.log("FileManager#checkFileType uri = " + uri + " fileType = " + fileType);

        // See: https://github.com/hiddentao/cordova-plugin-filepath and:
        // stackoverflow.com/questions/31338853/cordova-camera-plugin-obtain-full-image-path-from-gallery-android
        window.FilePath.resolveNativePath(uri,

          function (result) {
            var fileURI = 'file://' + result;

            $log.log('FileManager#checkFileType uri = ' + uri + ' fileURI = ' + fileURI);

            // See: https://github.com/cfjedimaster/Cordova-Examples/wiki/PhoneGap-Cordova-File-System-FAQ#meta
            window.resolveLocalFileSystemURL(fileURI,
              function (fileEntry) {

                fileEntry.file(function(file) {
                  var s = "";
                  s += "name: " + file.name + " ";
                  s += "localURL: " + file.localURL + " ";
                  s += "type: " + file.type + " ";
                  s += "lastModifiedDate: " + (new Date(file.lastModifiedDate)) + " ";
                  s += "size: " + file.size;

                  $log.info('FileManager#checkFileType uri = ' + uri + ' fileURI = ' + fileURI + ' INFO: ' + s);

                  if (file.type && file.type === fileType) {
                    deferred.resolve(file);
                  } else {
                    $log.warn('FileManager#checkFileType uri = ' + uri + ' fileURI = ' + fileURI +
                      ' wrong file type: ' + file.type + ' instead of ' + fileType);

                    deferred.reject('wrong_file_type');
                  }
                });
              },
              function (error) {
                $log.error('FileManager#checkFileType uri = ' + uri + ' fileURI = ' + fileURI +
                  ' ERR = ' + JSON.stringify(error));

                deferred.reject(error);
              }
            );
          },
          function (error) {
            $log.error('FileManager#checkFileType uri = ' + uri + ' ERR = ' + JSON.stringify(error));

            deferred.reject(error);
          }
        );

        return deferred.promise;
      };

      function chooseFileOk(deferred, uri) {
        $log.log('FileManager#chooseFile - uri: ' + uri);

        deferred.resolve(uri);
      }

      function chooseFileError(deferred, source) {
        $log.debug('FileManager#chooseFile - ' + source + ' error: ' + JSON.stringify(error));

        // assume operation cancelled
        deferred.reject('cancelled');
      }

      var chooseFile = function () {
        var deferred = $q.defer();

        // iOS (NOTE - only iOS 8 and higher): https://github.com/jcesarmobile/FilePicker-Phonegap-iOS-Plugin
        if (ionic.Platform.isIOS()) {

          FilePicker.pickFile(
            function (uri) {
              chooseFileOk(deferred, uri);
            },
            function (error) {
              chooseFileError(deferred, 'FilePicker');
            }
          );

        // Android: https://github.com/don/cordova-filechooser
        } else {

          fileChooser.open(
            function (uri) {
              chooseFileOk(deferred, uri);
            },
            function (error) {
              chooseFileError(deferred, 'fileChooser');
            }
          );
        }

        return deferred.promise;
      };

      return {
        downloadFile: downloadFile,
        checkFileType: checkFileType,
        getFileInfo: getFileInfo,
        removeFile: removeFile,
        chooseFile: chooseFile
      };
    });
}());

```

---

<div class="post-metadata">

**Author:** ![premtemp](https://avatars.discourse-cdn.com/v4/letter/p/2bfe46/32.png) [@premtemp](https://forum.ionicframework.com/u/premtemp)\
**Post date:** [November 16, 2016, 9:32pm UTC](https://forum.ionicframework.com/t/recommended-android-ios-file-chooser-plugin/20761/16 "2016-11-16T21:32:24Z")

</div>

Hello,  
I tried the code you provide and I get the file browser to show up and I can pick a file. However, the callback is not getting triggered…

I see this error in the android console  
W/CordovaInterfaceImpl: Got an activity result, but no plugin was registered to receive it

I am using cordova 6.3.1 and SDK 23 android 5.2.2

Thanks for your help.

---

<div class="post-metadata">

**Author:** ![leob](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/leob/32/14245_2.png) [@leob](https://forum.ionicframework.com/u/leob)\
**Post date:** [November 17, 2016, 2:43am UTC](https://forum.ionicframework.com/t/recommended-android-ios-file-chooser-plugin/20761/18 "2016-11-17T02:43:38Z")

</div>

I’ll have a look at it, right now I’m traveling but I’ll be in a hotel with Wifi tonight, will have a look when I have some time …

---

<div class="post-metadata">

**Author:** ![premtemp](https://avatars.discourse-cdn.com/v4/letter/p/2bfe46/32.png) [@premtemp](https://forum.ionicframework.com/u/premtemp)\
**Post date:** [November 21, 2016, 2:52pm UTC](https://forum.ionicframework.com/t/recommended-android-ios-file-chooser-plugin/20761/19 "2016-11-21T14:52:18Z")

</div>

Hello Leob,

Just checking to see if you had a moment to look into this issue…

Thanks

---

<div class="post-metadata">

**Author:** ![leob](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/leob/32/14245_2.png) [@leob](https://forum.ionicframework.com/u/leob)\
**Post date:** [November 22, 2016, 2:22am UTC](https://forum.ionicframework.com/t/recommended-android-ios-file-chooser-plugin/20761/20 "2016-11-22T02:22:44Z")

</div>

Not yet but it’s in my inbox, I’ll get around to it.

---

<div class="post-metadata">

**Author:** ![djsanj007](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/djsanj007/32/110816_2.png) [@djsanj007](https://forum.ionicframework.com/u/djsanj007)\
**Post date:** [January 17, 2017, 2:01pm UTC](https://forum.ionicframework.com/t/recommended-android-ios-file-chooser-plugin/20761/21 "2017-01-17T14:01:07Z")

</div>

Will Same plugin work on Ionic 2, I am trying the same for Ionic 2 but getting the following error on real device  
[Error] EXCEPTION: undefined is not an object (evaluating ‘a.plugins.fileChooser.open().then’)

FilePicker is Available & returning true, Following is my code

fileChooser = {  
open () : Promise {  
console.log(‘FilePicker will Load in new Way’);  
return FilePicker.pickFile().then((uri) =\> {  
return uri;  
}, (err) =\> {  
console.log(‘Failed to Load’);  
});  
},  
}

---

<div class="post-metadata">

**Author:** ![leob](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/leob/32/14245_2.png) [@leob](https://forum.ionicframework.com/u/leob)\
**Post date:** [March 19, 2017, 6:47am UTC](https://forum.ionicframework.com/t/recommended-android-ios-file-chooser-plugin/20761/22 "2017-03-19T06:47:32Z")

</div>

Well, for Android I’m using the file chooser plugin but for iOS I’ve switched from the “FilePicker” plugin to a simple HTML5 “file” input element, which turns out to be easier to use AND functionally superior … see here how to implement it:

> <https://gist.github.com/MatiMenich/ac87ee097706bf61b831>

Actually I did not literally use the code from the gist, I still had to make a few changes to get it working properly (with the code from the gist the “onchange” event didn’t always fire). If anyone is interested in my final solution then I can post it here.

And for iOS 9 and higher you need to configure “entitlements” (for iOS 10 therre’s even an additional requirement), all in all I think I spent the better part of a week just to get the iOS solution working!

[Next page](https://forum.ionicframework.com/t/recommended-android-ios-file-chooser-plugin/20761.md?page=2)