Ionic 3 post image using form-data

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?

score 1 · Answer 1 · answered Feb 27 '19 at 05:25

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'

answered Feb 27 '19 at 05:25

Div

63
2
10

I tried option #2, but it seems the base64 string is too long, so it throws an error. – Justinus Hermawan Feb 27 '19 at 05:43
What error did you face, base 64 strings can never be too long, it depends on file size? How heavy was the file? – Div Feb 27 '19 at 05:54
The post process is never done, infinite hanging and does not return anything. – Justinus Hermawan Feb 27 '19 at 06:12
did option one work for you? I cant really help you out without error messages though. – Div Feb 27 '19 at 06:21
Yes, sometimes it works, but sometimes not. The error message is just a connection timed out. – Justinus Hermawan Feb 27 '19 at 06:22
https://stackoverflow.com/questions/3829403/how-to-increase-the-execution-timeout-in-php – Div Feb 27 '19 at 06:43
wouldn't suggest anyone to use base64 to post images... it adds 30% of the original payload – emanuel sanga Oct 05 '20 at 09:22

score 0 · Answer 2 · answered Feb 27 '19 at 10:18

0

i advise you use the native plugin to upload file :

https://ionicframework.com/docs/native/file-transfer/

answered Feb 27 '19 at 10:18

Ahmed Atoui

1,506
1
8
11

score 0 · Answer 3 · answered Jul 22 '19 at 06:51

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.

Ionic 3 post image using form-data

3 Answers3