Image upload to S3 Server

In our application we have a feature to upload the image to S3. I am able to upload the image to S3 Server successfully from my web app but i am facing issues in mobile app.This is how i uploaded the image from my web app . In html i have

<input name="file" type="file" (change)="onChange($event)"/>

When the image is changed

    onChange(event: any) {
    var files = event.srcElement.files;
    var file = event.target.files[0];
    var filename = event.target.files[0].name;
    var contentType = event.target.files[0].type;
    var queryString = '';

    queryString = queryString + 'filename=' + filename +
        '&content_type=' + contentType;

    this.srvc.GetS3Credentials(queryString).subscribe((response: any) => {
        this.upload(file, response); 
    });
}

I get the credentials and the make a call which uploads the image

    upload(file: any, response: any) {
    let formData: FormData = new FormData();
    let xhr: XMLHttpRequest = new XMLHttpRequest();

    //Build AWS S3 Request
    formData.append('key', response.params.key);
    formData.append('acl', response.params.acl);
    formData.append('content-Type', response.params['content-type']);
    //Put in your access key here
    formData.append('x-amz-algorithm', response.params['x-amz-algorithm']);

    formData.append('x-amz-credential', response.params['x-amz-credential']);
    formData.append('x-amz-date', response.params['x-amz-date']);
    formData.append('policy', response.params['policy']);
    formData.append('x-amz-signature', response.params['x-amz-signature']);
    formData.append('success_action_status', response.params['success_action_status']);
    formData.append('file', file);

    xhr.open('POST', response.endpoint_url, true);
    xhr.send(formData);
}

With the above code i am able to upload the image successfully. But from my mobile app i need to capture an image and upload.I tried following the same steps which i did in web app . In web app when file is selected i get an argument event which has the file information which i am unable to get from mobile app.

  GetImageData(sourceType: any) {
var options = {
  quality: 50,
  sourceType: sourceType,
  encodingType: this.camera.EncodingType.JPEG,
  saveToPhotoAlbum: true,
  correctOrientation: true,
  mediaType: this.camera.MediaType.PICTURE
};

this.camera.getPicture(options).then((imagePath) => {
  if (this.platform.is('android') && sourceType === this.camera.PictureSourceType.PHOTOLIBRARY) {
    this.filePath.resolveNativePath(imagePath)
      .then(filePath => {
        this.GetS3Credentials(imagePath);
      });
  } else {
    this.GetS3Credentials(imagePath);
  }
}, (err) => {
  this.trNotifier.ErrorMessageNotifier('Error while capturing image.');
});
}

with file name i got s3 credentials but i am unable to find the file info which is causing me an error to upload the file.Can Somebody please help me

1 Like

Hi, I am having similar problems. I tried following this https://devdactic.com/ionic-2-images/ which uses the cordova file-transfer plugin, but S3 complains that the upload request does not match the credentials I got from my backend server (which I know works as like you I can upload from a javascript File).

Also, it appears that the cordova file transfer plugin is now deprecated and this blog post from-filetransfer-to-xhr2 suggests using XMLHttpRequest as you are doing. That post does however show using a FileReader to recreate a Blob file which is then uploaded.

I have had some success with this - I can get S3 to accept upload, but does not recognize as an image (I can download and open as image though). I have not been using anything other than the signedRequest and url from the S3 credentials, so I will give this a try.

Good luck and please let me know if you find a solution.

Thank you… I will try with XMLHttpRequest and let you know the solution ASAP

@devegss Hi,
I had same issue. I use ( new XMLHttpRequest) and problem is solved…
If you want to ask then ping me at my mail id piyushpatil027@gmail.com