Menu
I'm trying to use the Cordova plugin: cordova-plugin-filepath
https://www.npmjs.com/package/cordova-plugin-filepath
on an Corodva / Ionic (Android) application.
I'm trying to use it with the same code as on the above url, I mean:
window.FilePath.resolveNativePath('content://...', successCallback, errorCallback);
But I get:
[11:36:22] typescript: D:/ionic2/test-app/src/pages/home/home.ts, line: 27
Property 'FilePath' does not exist on type 'Window'.
L26: this._camera.getPicture( options ).then(( imageData ) => {
L27: this.cameraUrl = window.FilePath.resolveNativePath(imageData);
L28: this.photoSelected = true;
Do I have to import window somehow?
I'm using this plugin to convert the path of a file from:
content://com.android.providers.media.documents/document/...
to:
/storage/sdcard/...
This is my environment information:
Your system information:
Cordova CLI: 6.5.0
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.10.2
Xcode version: Not installed
Just in case, here I drop the code for: home.ts:
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { DomSanitizer } from '@angular/platform-browser';
import { Camera } from '@ionic-native/camera';
@Component( {
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
cameraData: string;
photoTaken: boolean;
cameraUrl: string;
photoSelected: boolean;
constructor( public navCtrl: NavController, private _DomSanitizationService: DomSanitizer, private _camera: Camera ) {
this.photoTaken = false;
}
selectFromGallery() {
var options = {
sourceType: this._camera.PictureSourceType.PHOTOLIBRARY,
destinationType: this._camera.DestinationType.NATIVE_URI
};
this._camera.getPicture( options ).then(( imageData ) => {
this.cameraUrl = window.FilePath.resolveNativePath(imageData);
this.photoSelected = true;
this.photoTaken = false;
}, ( err ) => {
// Handle error
});
}
openCamera() {
var options = {
sourceType: this._camera.PictureSourceType.CAMERA,
destinationType: this._camera.DestinationType.DATA_URL,
correctOrientation: true
};
this._camera.getPicture( options ).then(( imageData ) => {
this.cameraData = 'data:image/jpeg;base64,' + imageData;
this.photoTaken = true;
this.photoSelected = false;
}, ( err ) => {
// Handle error
});
}
}
Any idea on how to make this plugin work?
[EDIT 1]
I modified the source code in the following way:
import { FilePath } from '@ionic-native/file-path';
...
constructor(
public navCtrl: NavController,
private _DomSanitizationService: DomSanitizer,
private _camera: Camera,
private filePath: FilePath
) {
this.photoTaken = false;
}
...
selectFromGallery() {
var options = {
sourceType: this._camera.PictureSourceType.PHOTOLIBRARY,
destinationType: this._camera.DestinationType.NATIVE_URI
};
this._camera.getPicture( options ).then(( imagePath ) => {
this.filePath.resolveNativePath(imagePath).then(filePath => {
this.cameraUrl = filePath;
this.photoSelected = true;
this.photoTaken = false;
});
});
}
Also did:
$ ionic plugin add cordova-plugin-filepath
But now I get the following error:
Runtime Error
Uncaught (in promise): Error: No provider for FilePath! Error at g (http://192.168.1.202:8100/build/polyfills.js:3:7133) at injectionError (http://192.168.1.202:8100/build/main.js:1511:86) at noProviderError (http://192.168.1.202:8100/build/main.js:1549:12) at ReflectiveInjector_._throwOrNull (http://192.168.1.202:8100/build/main.js:3051:19) at ReflectiveInjector_._getByKeyDefault (http://192.168.1.202:8100/build/main.js:3090:25) at ReflectiveInjector_._getByKey (http://192.168.1.202:8100/build/main.js:3022:25) at ReflectiveInjector_.get (http://192.168.1.202:8100/build/main.js:2891:21) at AppModuleInjector.NgModuleInjector.get (http://192.168.1.202:8100/build/main.js:3856:52) at resolveDep (http://192.168.1.202:8100/build/main.js:11260:45) at createClass (http://192.168.1.202:8100/build/main.js:11128:32) at createDirectiveInstance (http://192.168.1.202:8100/build/main.js:10954:37) at createViewNodes (http://192.168.1.202:8100/build/main.js:12303:49) at createRootView (http://192.168.1.202:8100/build/main.js:12208:5) at callWithDebugContext (http://192.168.1.202:8100/build/main.js:13339:42) at Object.debugCreateRootView [as createRootView] (http://192.168.1.202:8100/build/main.js:12800:12)
Stack
Error: Uncaught (in promise): Error: No provider for FilePath!
Error
at g (http://192.168.1.202:8100/build/polyfills.js:3:7133)
at injectionError (http://192.168.1.202:8100/build/main.js:1511:86)
at noProviderError (http://192.168.1.202:8100/build/main.js:1549:12)
at ReflectiveInjector_._throwOrNull (http://192.168.1.202:8100/build/main.js:3051:19)
at ReflectiveInjector_._getByKeyDefault (http://192.168.1.202:8100/build/main.js:3090:25)
at ReflectiveInjector_._getByKey (http://192.168.1.202:8100/build/main.js:3022:25)
at ReflectiveInjector_.get (http://192.168.1.202:8100/build/main.js:2891:21)
at AppModuleInjector.NgModuleInjector.get (http://192.168.1.202:8100/build/main.js:3856:52)
at resolveDep (http://192.168.1.202:8100/build/main.js:11260:45)
at createClass (http://192.168.1.202:8100/build/main.js:11128:32)
at createDirectiveInstance (http://192.168.1.202:8100/build/main.js:10954:37)
at createViewNodes (http://192.168.1.202:8100/build/main.js:12303:49)
at createRootView (http://192.168.1.202:8100/build/main.js:12208:5)
at callWithDebugContext (http://192.168.1.202:8100/build/main.js:13339:42)
at Object.debugCreateRootView [as createRootView] (http://192.168.1.202:8100/build/main.js:12800:12)
at g (http://192.168.1.202:8100/build/polyfills.js:3:7133)
at l (http://192.168.1.202:8100/build/polyfills.js:3:6251)
at http://192.168.1.202:8100/build/polyfills.js:3:6805
at t.invokeTask (http://192.168.1.202:8100/build/polyfills.js:3:15213)
at Object.onInvokeTask (http://192.168.1.202:8100/build/main.js:4415:37)
at t.invokeTask (http://192.168.1.202:8100/build/polyfills.js:3:15134)
at n.runTask (http://192.168.1.202:8100/build/polyfills.js:3:10390)
at a (http://192.168.1.202:8100/build/polyfills.js:3:5313)
[EDIT 2]
Ont top of [EDIT 1] I did the following edition:
@Component( {
selector: 'page-home',
templateUrl: 'home.html',
providers: [ FilePath ]
})
I'm not getting errors this time but the image is not loading. I used a text area to see the what src value is passed to the image.
I also noticed that now I'm getting the real path (that's good).
Maybe now is a matter of permissions of the embedded webview. Please, check this link: https://forum.ionicframework.com/t/no-local-image-showing-in-view-on-device/30647
I think I'm getting closer.
Here is an screenshot of my phone:
[EDIT 3]
I'm running on a real Android device with this commnad:
$ ionic run android -l
652
First of all you should follow the usage method in the Ionic2 doc, instead of the one in plugin doc.
Check the Ionic2 Doc here https://ionicframework.com/docs/native/file-path/
First import the FilePath
import { FilePath } from '@ionic-native/file-path';
Secondly add FilePath to your constructor
constructor(
public navCtrl: NavController,
private _DomSanitizationService: DomSanitizer,
private _camera: Camera,
private filePath: FilePath
) {
this.photoTaken = false;
}
Then use it like this in your code:
selectFromGallery() {
var options = {
sourceType: this._camera.PictureSourceType.PHOTOLIBRARY,
destinationType: this._camera.DestinationType.NATIVE_URI
};
this._camera.getPicture( options ).then(( imageData ) => {
//use this.filePath instead of window.FilePath
this.cameraUrl = this.filePath.resolveNativePath(imageData);
this.photoSelected = true;
this.photoTaken = false;
}, ( err ) => {
// Handle error
});
}
Edit: since the poster is using Ionic 3.0.1 a provider need to be added else will result in no provider FilePath error.
Add the provider inside @Component like so:
@Component({
...
providers: [ FilePath ],
...
})
Hope this helps! ^_^
181
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
