ACCESS LOCAL FILE PATH IN IONIC 4
we mainly need three things required to access the local file path in ionic 4.
First, we need an ionic camera plugin
second, DomSanitizer on importing “platform-browser”
third, Webview on. importing “ionic-webview”
Let's continue on the codding part. Get indepth use of ionic camera plugin , domsanitizer and ionic-webview.
Go to “config.xml” of app , Simply given below code before the end of “” tag.
<edit-config target="NSCameraUsageDescription" file="*-Info.plist" mode="merge">
<string>need camera access to take pictures</string>
</edit-config>
<edit-config target="NSPhotoLibraryUsageDescription" file="*-Info.plist" mode="merge">
<string>need photo library access to get pictures from there</string>
</edit-config>
<edit-config target="NSLocationWhenInUseUsageDescription" file="*-Info.plist" mode="merge">
<string>need location access to find things nearby </string>
</edit-config>
<edit-config target="NSPhotoLibraryAddUsageDescription" file="*-Info.plist" mode="merge">
<string>need photo library access to save pictures there</string>
</edit-config>
providers: [ Camera]
<h1 class="headerColor">Camera Option</h1>
<img alt="preview" />
// <---Import Part of code. --->
import { Camera, CameraOptions } from '@ionic-native/camera/ngx';
import { DomSanitizer } from '@angular/platform-browser';
import { WebView } from '@ionic-native/ionic-webview/ngx';
// <---- constructor part of code --->
constructor(private camera: Camera,
public sanitizer: DomSanitizer,
public webview: WebView)
{
console.log("constructor block");
}
// <-----Function Part of Code ----->
cameraSelectionHandler() {
const options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.FILE_URI,
// encodingType: this.camera.EncodingType.Pm,
mediaType: this.camera.MediaType.ALLMEDIA,
sourceType: this.camera.PictureSourceType.SAVEDPHOTOALBUM
}
this.camera.getPicture(options).then((imageData) => {
console.log(imageData)
this.previewHandler = imageData;
// imageData is either a base64 encoded string or a file URI
// If it's base64 (DATA_URL):
}, (err) => {
// Handle error
});
} knowledge point of view
Camera option having so many parameters, Here we explain important one.
“quality”: In quality, we can set the quality of images and we can achieve the compress of an image. If you minimize the quality of the image.
“destinationType”: it gives the type of local file path to be used. Mainly it takes three values at a time. That is
i. DATA.URL (it gives Base 64 file path, As my recommendation doesn’t use access to bigger file size content. it might be the app would be crashed.)
ii.FILE_URI ( it gives the full path of the file. )
iii.NATIVE_URI ( Return native URI (eg. asset-library://… for iOS)
“mediaType”: Mainly it takes three values at a time.
i. “ALLMEDIA” : ( Returns images and videos both of them at a time)
ii. “PICTURE” : (Returns images only)
iii. “VIDEO” : (Retuns video only)
“sourceType” It’s three values at a time to use the handle. Either use camera or Gallery.
i. camera ( Return open the camera mode )
ii. PHOTOLIBRARY ( Return picture library , It only works on android, not for ios)
iii.SAVEDPHOTOALBUM ( Return picture library. Work on both devices. One thing note it’s also related to media type.
If you select mediaType is “PICTURE”. So SAVEDPHOTOALBUM gives images only.
If you select mediaType is “ALLMEDIA”. So SAVEDPHOTOALBUM gives images and videos.
If you select mediaType is “VIDEO”. So SAVEDPHOTOALBUM gives videos only.