I’m developing an app and trying to upload an image in base64 to my server. Testing the code via web it works perfectly! And when I convert the image in base64 to File, it returns me the following object:
But when I try to make the same thing in my mobile app running on an Android device, the same code creates to me the following File object:
What is happening? I call the function to convert my base64 image to File as this:
var blob = new Blob([photoBase64], {type: 'image/png'});
var filePhoto = new File([blob], "employeePhoto.png");
It is very strange that the same code gets different results when running via Web Browser and running via Android.
In first image (which worked) I was running on web browser.
In second image (not worked) I was running on Android app.
It is the same code…
It appears that File constructor have different behavior in web browser and Android app. I am not understanding this. Passing the parameters to File constructor in the same order create different File objects (as the described on images).
I already have the image in base64. Now the problem is only to upload this image in base64 to my server through cordova-file-transfer or any other way different of Blob/File way as described in my post.
//import this
import { OnInit } from '@angular/core';
import { CameraOptions, Camera } from '@ionic-native/camera';
import{ AuthService } from '../../providers/auth-service/auth-service';
export class UpdateImagePage implements OnInit {
//property
responseData: {};
imgData = {"imageB64":""}
public photos: any;
public getImage: any;
public base64Image: string;
constructor(private camera : Camera, public authService : AuthService) {
}
ngOnInit() {
this.photos = [];
}
//function to take picture from camera
takePhoto() {
const options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.DATA_URL,
targetWidth: 450,
targetHeight: 450,
saveToPhotoAlbum: false,
correctOrientation: true
};
//get data picture and psuh to base64image
this.camera.getPicture(options).then(
imageData => {
this.base64Image = "data:image/jpeg;base64," + imageData;
this.photos.push(this.base64Image);
this.photos.reverse();
this.getPhoto = photoData;
},
err => {
console.log(err);
}
);
}
//this function for upload and back
uploadPhoto(){
this.sendData(this.getPhoto);
this.navCtrl.pop();
}
//this function to send data imagebase64
sendData(imageData) {
this.imgData.imageB64 = imageData;
console.log(this.imgData);
//my service for send data to server, use your service provider in here
this.authService.postData(this.imgData, "uploadPhoto").then(
result => {
this.responseData = result;
},
err => {
// Error log
}
);
}
}
I know this was solved but there is the .btoa() and .atob() that encodes and decodes into base64. Which does which is unknown to me as I always have to do a web search to find the answer
Hello, @vinimendes3 there is another way other than the Base64. I use this Tutorial and I believe its gonna help you as it did help me few days ago with my image upload to the server using Php on my backend.
