I used Ionic 5 with Capacitor 2. Here’s my project info:
Ionic:
Ionic Framework : @ionic/angular 5.5.4
@angular/cli : 11.2.2
Capacitor:
Capacitor CLI : 2.4.2
@capacitor/android : 2.4.6
@capacitor/core : 2.4.2
npm : 6.14.18
Here’s my upload photo service. It is called when user selected to upload photo via camera or gallery:
async addProfilePicture(source) {
this.profileUpload = [];
const capturedId = await Camera.getPhoto({
resultType: CameraResultType.Uri,
source: source,
quality: 100,
allowEditing: false
});
this.profilePicture.unshift({filepath:'',webviewPath:capturedId.webPath});
// For server upload
const response = await fetch(capturedId.webPath!)
const blob = await response.blob();
this.profileUpload.push(blob);
}
after that, i have a service call post the this.profileUpload to the server.
editProfile(form): Observable<any>{
const profileData = new FormData();
profileData.append('firstName', form.value.firstname);
profileData.append('lastName', form.value.lastname);
profileData.append('phoneNumber', form.value.phoneNumber);
profileData.append('bio', form.value.bio);
for (let pic of this.profileUpload){
profileData.append('avatar', pic);
}
return this.http.post(this.userApi+'profile/edit', profileData);
}
It works normally when I test from browser and using Postman. But when I test in Android Studio emulator or install apk in real device, it doesnt work. In fact when I check the uploaded image and open it in a browser, it shows an image of 1px.