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 =[0];
    var filename =[0].name;
    var contentType =[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);'POST', response.endpoint_url, true);

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,
  saveToPhotoAlbum: true,
  correctOrientation: true,
}; => {
  if ('android') && sourceType === {
      .then(filePath => {
  } else {
}, (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 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