Hey there,
I’m trying to take a photo/select one from the library, store it and then upload it to a REST webserver. I’m not being able to store it.
i believe the problem is related to where Im storing the images. Right now, for test purposes, im only choosing photos from my gallery instead of actually taking photos.
when running this:
private copyFileToLocalDir(namePath, currentName, newFileName) {
// this.presentToast(namePath,currentName,newFileName);
this.file.copyFile(namePath, currentName, cordova.file.externalDataDirectory, newFileName).then(success => {
this.lastImage = newFileName;
}, error => {
this.presentToast('Error while storing file.');
});
}
i always get the “Error while storing file”.
According to the docs im storing images on the right place (im only going for Android!!)
Im following this tutorial: https://devdactic.com/ionic-2-images/
here is the relevant part of my code:
import { Component, Input, SimpleChanges, OnInit } from '@angular/core';
import { NavController, NavParams, LoadingController, ToastController, Platform, Loading } from 'ionic-angular';
import { IpmaBivService} from '../../app/services/ipmabiv.service'
import { Http } from '@angular/http';
import { Camera, CameraOptions } from '@ionic-native/camera';
import { File } from '@ionic-native/file';
// import { TransferObject } from '@ionic-native/file-transfer';
import { FileTransfer, FileTransferObject } from '@ionic-native/file-transfer';
// import { TransferObject } from '@ionic-native/file-transfer';
import { FilePath } from '@ionic-native/file-path';
declare var cordova: any;
@Component({
selector: 'page-estados',
providers: [File,FileTransfer,FilePath,Camera],
templateUrl: 'estados.html'
})
export class EstadosPage implements OnInit {
lastImage: string = null;
loading: Loading;
public base64Image: string;
constructor(public navCtrl: NavController, public loadingCtrl: LoadingController, private ipmaBivService:IpmaBivService, public navParams: NavParams, public platform: Platform, public toastCtrl: ToastController,
public camera: Camera, private transfer: FileTransfer, private file: File, private filePath: FilePath) {
}
private createFileName() {
var d = new Date(),
n = d.getTime(),
newFileName = n + ".jpg";
return newFileName;
}
// Copy the image to a local folder
private copyFileToLocalDir(namePath, currentName, newFileName) {
// this.presentToast(namePath,currentName,newFileName);
this.file.copyFile(namePath, currentName, cordova.file.externalDataDirectory, newFileName).then(success => {
this.lastImage = newFileName;
}, error => {
this.presentToast('Error while storing file.');
});
}
private presentToast(text) {
let toast = this.toastCtrl.create({
message: text,
duration: 3000,
position: 'top'
});
toast.present();
}
// Always get the accurate path to your apps folder
public pathForImage(img) {
if (img === null) {
return '';
} else {
return cordova.file.externalDataDirectory + img;
}
}
public takePicture(){
const options: CameraOptions = {
quality: 100,
// sourceType: this.camera.PictureSourceType.CAMERA,
sourceType: this.camera.PictureSourceType.SAVEDPHOTOALBUM,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
allowEdit: true
}
this.camera.getPicture(options).then((imagePath) => {
// Special handling for Android library
if (this.platform.is('android')) {
this.filePath.resolveNativePath(imagePath)
.then(filePath => {
let correctPath = filePath.substr(0, filePath.lastIndexOf('/') + 1);
let currentName = imagePath.substring(imagePath.lastIndexOf('/') + 1, imagePath.lastIndexOf('?'));
this.copyFileToLocalDir(correctPath, currentName, this.createFileName());
});
} else {
//dont mind this else
var currentName = imagePath.substr(imagePath.lastIndexOf('/') + 1);
var correctPath = imagePath.substr(0, imagePath.lastIndexOf('/') + 1);
this.copyFileToLocalDir(correctPath, currentName, this.createFileName());
}
}, (err) => {
this.presentToast('Error while selecting image.');
});
}
my package.json:
{
"name": "ipmabiv_app",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"@angular/common": "4.4.3",
"@angular/compiler": "4.4.3",
"@angular/compiler-cli": "4.4.3",
"@angular/core": "4.4.3",
"@angular/forms": "4.4.3",
"@angular/http": "4.4.3",
"@angular/platform-browser": "4.4.3",
"@angular/platform-browser-dynamic": "4.4.3",
"@ionic-native/camera": "^4.5.3",
"@ionic-native/core": "^4.5.3",
"@ionic-native/file": "^4.5.3",
"@ionic-native/file-path": "^4.5.3",
"@ionic-native/file-transfer": "^4.5.3",
"@ionic-native/splash-screen": "4.3.0",
"@ionic-native/status-bar": "4.3.0",
"@ionic-native/transfer": "^3.14.0",
"@ionic/storage": "2.0.1",
"@types/google-maps": "^3.2.0",
"cordova-android": "7.0.0",
"cordova-plugin-camera": "^4.0.2",
"cordova-plugin-device": "^1.1.7",
"cordova-plugin-file": "^6.0.1",
"cordova-plugin-file-transfer": "^1.7.1",
"cordova-plugin-filepath": "^1.2.0",
"cordova-plugin-ionic-webview": "^1.1.16",
"cordova-plugin-splashscreen": "^4.1.0",
"cordova-plugin-whitelist": "^1.3.3",
"ionic-angular": "3.7.1",
"ionic-plugin-keyboard": "^2.2.1",
"ionicons": "3.0.0",
"rxjs": "5.4.3",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.18"
},
"devDependencies": {
"@ionic/app-scripts": "3.0.0",
"typescript": "2.3.4"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"ionic-plugin-keyboard": {},
"cordova-plugin-whitelist": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {},
"cordova-plugin-camera": {},
"cordova-plugin-filepath": {},
"cordova-plugin-file": {},
"cordova-plugin-file-transfer": {}
},
"platforms": [
"android"
]
}
}
my app views are merely calling takePicture().
Any idea where I might be wrong?
thank you very much!