Unable to run FileChooser

Capacitor
1

When trying to use the FileChooser plugin in capacitor I get the following:

[Warning] Native: tried calling FileChooser.open, but the FileChooser plugin is not installed. (user-script:2, line 266)
[Warning] Install the FileChooser plugin: 'ionic cordova plugin add cordova-plugin-filechooser' (user-script:2, line 266)
[Error] ERROR – Error: Uncaught (in promise): plugin_not_installed
Error: Uncaught (in promise): plugin_not_installed

Any ideas? I’ve installed it using File Chooser | Opens File Picker on Android and Returns File URI and added it to my providers, but doesn’t seem to work. Also tried on both an emulator and real device

Thanks in advance

2

Here is the documentation for installing Cordova plugins to be run under Capacitor. Is there any possibility you skipped the npx cap sync step?

3

Thanks for the reply. Yup, ran all the steps twice and even tried npx cap sync and ionic cap sync (I’m sure they do the exact same thing). It doesn’t appear to be adding an entry to my ios/App/App/config.xml which is strange, other plugins tend to (and it does add an entry to the android config.xml).

4

:man_facepalming:t2: its android only. Will need to find a plugin that also works for iOS

5

As long as we’re facepalming, can I ask a monumentally stupid question? Is something blocking you from just using a good old <input type="file">?

1 Like
6

Good question :sweat_smile: I could i theory use that (and tbh it never crossed my mind haha), but I was hoping to use something a bit cleaner behind the scenes and not have the horrible looking input element if possible

7

If you’re referring to the dialog, probably not much one can do about the appearance of that. But if you’re talking of the trigger button, there are probably a million blog entries out there detailing various strategies for substituting custom elements that are linked to the (hidden) <input type="file">, because this has been a concern of web designers for decades now.

I don’t have a particular favorite lying around, and will warn you that there will be some that are more or less hostile to users relying on assistive technology, and others that will use code more or less idiomatic to whatever JavaScript framework you’re using for the rest of your app. Still, there should be enough options out there for you to find something close enough to get you started.

And, as a bonus, now this will work even in a PWA on a desktop browser, because you won’t be needing a plugin at all.

8

I will look into that. Thanks for the response, thats been super helpful!