This article provides you the solution for Ionic @awesome-cordova-plugins/chooser not returning file path. While working on Ionic application, you will receive this issue.
Know about awesome-cordova-plugins/chooser plugin
The Ionic @awesome-cordova-plugins/chooser plugin provides a simple way to allow users to choose files from their device. User needs to provide access to plugin to his file system.
Sometimes this plugin does work. However, it may not always return a file path, which can be frustrating for developers.
Reasons and solution for Ionic @awesome-cordova-plugins/chooser not returning file path
There are multiple reasons for this issue. Below we are providing fix in each condition.
Solution 1 : Call the corrcet method
It happens when developers call wrong method to retrieve the file path after the user has selected a file.
Here’s we are demonstrating one example to show how to use the @awesome-cordova-plugins/chooser plugin:
import { Chooser } from '@awesome-cordova-plugins/chooser';
async function selectFile() {
try {
const file = await Chooser.getFile();
console.log(file.uri); // this should log the file path
} catch (error) {
console.error(error);
}
}
Note that the file path is accessed through the uri property of the file object returned by the plugin. Sometimes the file path returned by the plugin may be different than what you expect.
Make sure you’re using the correct path when working with the file. Also check the file path returned by the plugin.
Solution 2 : Update the awesome-cordova-plugins/chooser plugin
If you are already using the plugin correctly and are still not getting the file path, there may be an issue with the plugin itself. You can update the plugin to the latest version.
In case after changing plugin version also it did not work, you can choose different file chooser plugin. You can check the latest version on the npm registry.
In case you are using old version of plugin, please try to update it.
Solution 3 : Make sure app has the necessary access permission
Ensure that your app has the necessary permissions to access the file. If your app does not have the necessary permissions, the plugin may not be able to return the file path.
Check the permissions on the device. Make sure the app has permission to access files.
On Android, you can check this by going to Settings > Apps > [Your App] > Permissions.
On iOS, go to Settings > [Your App] > Photos (or other relevant permission).
Solution 4 : Use resolveNativePath method from the @ionic-native/file-path plugin
You can use the resolveNativePath method from the @ionic-native/file-path plugin to convert the file URI to a file path.
This is necessary because the file URI returned by the chooser plugin is not a direct file path.
import { Chooser } from '@awesome-cordova-plugins/chooser';
import { FilePath } from '@ionic-native/file-path';
// ...
const fileUri = await Chooser.getFileUri();
const filePath = await FilePath.resolveNativePath(fileUri);
Afterwards use the @ionic-native/file plugin to read the contents of the selected file. It allows you to read files from the file system using a file path.
Make sure that you have installed @ionic-native/file plugin. So that you can import it in code base.
npm install @ionic-native/file
Once the plaugin installed you can use this code :
import { Chooser } from '@awesome-cordova-plugins/chooser';
import { File } from '@ionic-native/file';
// ...
const fileUri = await Chooser.getFileUri();
const filePath = await File.resolveLocalFilesystemUrl(fileUri);
const fileEntry = await File.getFile(filePath.nativeURL, '', true);
// Do something with the file entry...
In case @ionic-native/file import is not working. You can use this import.
import { File } from '@ionic-native/file/ngx';
Also add the File plugin to the providers array in the @NgModule decorator:
@NgModule({
// ...
providers: [
// ...
File
]
})
This will help you to use File plugin throughout the Ionic application.
Solution 5 : Use cordova-plugin-filepath plugin instead of @ionic-native/file-path
In case the @ionic-native/file-path solution is not working, you can use cordova-plugin-filepath plugin. It provides the same method resolveNativePath.
To do this, you need to install cordova-plugin-filepath plugin. Run this command to install the cordova-plugin-filepath.
cordova plugin add cordova-plugin-filepath
Next, you need to add the plugin’s JavaScript interface to your index.html file. Add the following line to the head section of the file:
<script src="cordova.js"></script>
Once the plugin is installed and configured, you can use this code to read file path. Afterwards you can use resolveNativePath method.
import { Chooser } from '@awesome-cordova-plugins/chooser';
import { FilePath } from 'cordova-plugin-filepath';
// ...
const fileUri = await Chooser.getFileUri();
const filePath = await FilePath.resolveNativePath(fileUri);
Solution 6 : cordova-plugin-filepath plugin along with @awesome-cordova-plugins/chooser
Finally, use this method in case all the above solutions do not work for you.
Use the cordova-plugin-filepath plugin along with @awesome-cordova-plugins/chooser. This plugin provides a way to get the real file path from a file URI. This may fix the problem completely.
To implement this solution you may need to install cordova-plugin-filepath. To install you can run this command.
cordova plugin add cordova-plugin-filepath
Once cordova-plugin-filepath installation is done. You can import the Chooser plugin along with the File and FilePath plugins in your component file.
import { Chooser } from '@awesome-cordova-plugins/chooser';
import { File } from '@ionic-native/file/ngx';
import { FilePath } from '@ionic-native/file-path/ngx';
Next you can inject the File and FilePath plugins in your component’s constructor.
constructor(private chooser: Chooser, private file: File, private filePath: FilePath) {}
Use the chooser plugin to choose a file:
this.chooser.getFile().then((uri: string) => {
// Get the real file path from the file URI
this.filePath.resolveNativePath(uri).then((filePath: string) => {
// Use the file path to do something with the file
console.log('File path:', filePath);
});
});
Since we are using cordova-plugin-filepath plugin along with @awesome-cordova-plugins/chooser, you should be able to get the real file path from a file URI and use it as needed.
This solution should work in case above other solutions did not work.
Conclusion
Hopefully, you are able to solve the Ionic @awesome-cordova-plugins/chooser not returning file path issue. In case still this issue persist then you need to test your application on other device.
You may like to read :
