Ionic 3 post image using form-data - php

Question

I'm trying to post form data, consists of text and image file to PHP server.
I use ionic native camera to get a picture from gallery:
const options: CameraOptions = {
quality: 70,
destinationType: this.camera.DestinationType.FILE_URI,
sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
saveToPhotoAlbum:false,
targetWidth: 400,
targetHeight: 400
}
this.camera.getPicture(options).then((imageData) => {
this.myphoto = normalizeURL(imageData);
this.myphoto2 = imageData;
}, (err) => {
});
And post it using form data:
var headers = new Headers();
headers.append('Content-Type', 'multipart/form-data;boundary=' + Math.random());
headers.append('Accept', 'application/json');
let options = new RequestOptions({
headers: headers
});
let formData = new FormData();
formData.append('judul', this.judul.value);
formData.append('photo', this.myphoto, '123.jpg');
this.http.post('http://localhost/upload.php', formData, options)
.map(...)
.subscribe(...);
But, I saw on PHP log, the form-data not sent by ionic.
What's wrong here?

Answer 1

You can try removing 'options' from the this.http.post() arguments.
Your code becomes :
this.http.post('http://localhost/upload.php', formData)
.map(...)
.subscribe(...);
If this doesn't work,
try sending across the entire BASE64 Image using
'destinationType: this.camera.DestinationType.DATA_URL'

Answer 2

i advise you use the native plugin to upload file :
https://ionicframework.com/docs/native/file-transfer/

Answer 3

First Take Photo From Camera
async takePhoto() {
const options: CameraOptions = {
quality: 70,
destinationType: this.camera.DestinationType.FILE_URI,
sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
saveToPhotoAlbum:false,
targetWidth: 400,
targetHeight: 400
}
this.camera.getPicture(options).then((imageData) => {
this.getSystemURL(imageData);
}, (err) => {
});
}
Than Get a Local System Image URL
private getSystemURL(imageFileUri: any): void {
this.file.resolveLocalFilesystemUrl(imageFileUri)
.then(entry => (entry as FileEntry).file(file => {
this.readFile(file);
}))
.catch(err => console.log(err));
}
After Read That Image URL
private readFile(file: any) {
const reader = new FileReader();
reader.onloadend = () => {
this.myphoto = new Blob([reader.result], {type: file.type});
var headers = new Headers();
headers.append('Content-Type', 'multipart/form-data;boundary=' + Math.random());
headers.append('Accept', 'application/json');
let options = new RequestOptions({
headers: headers
});
let formData = new FormData();
formData.append('judul', this.judul.value);
formData.append('photo', this.myphoto, '123.jpg');
this.http.post('http://localhost/upload.php', formData, options)
.map(...)
.subscribe(...);
};
reader.readAsArrayBuffer(file);
}
It is working for me,
Hope it will help.