title: nativescript-background-http file uploading to s3
body: <p>Based on <a href="https://stackoverflow.com/questions/37388774/nativescript-camera-takepicture-and-upload-with-nativescript-background-http">NativeScript: Camera takePicture and upload with nativescript-background-http</a></p>
  
  <p>I am trying to write a class to take care of file uploading to s3 for me.</p>
  
  <p>My upload function looks like this: </p>
  
  <pre><code>upload() {
      const format = enumsModule.ImageFormat.png
      cameraModule.takePicture().then(img =&gt; {
          let savePath = fsModule.knownFolders.documents().path;
          console.log('Save Path', savePath);
          let fileName = "img_" + new Date().getTime() + "." + format;
          console.log('fileName', fileName);
          let filePath = fsModule.path.join(savePath, fileName);
          console.log('FilePath', filePath);
          if (img.saveToFile(filePath, format)) {
              let s3Upload = new S3Upload(format, fileName, filePath, this.progressCallback);
              s3Upload.getSignedRequest()
                  .then((url) =&gt; {
                      alert(url);
                  })
                  .catch(error =&gt; {
                      console.log('Error!');
                      alert(error);
                  })
          }
      });
  }
  progressCallback(e: any) {
      console.log(e);
  }
  </code></pre>
  
  <p>And my file uploader looks like this:</p>
  
  <pre><code>import {Config} from "../../../shared/config";
  import {SignS3Response} from "./signs3Response";
  
  export class S3Upload {
      fileType: String;
      fileName: String;
      filePath: String;
      progressCallback: (e) =&gt; void;
      constructor(fileType: String, fileName: String, filePath: String, progressCallback: (e) =&gt; void) {
          this.fileType = fileType;
          this.fileName = fileName;
          this.filePath = filePath;
          this.progressCallback = progressCallback;
      }
      getSignedRequest() {
          var xhr = new XMLHttpRequest();
          return new Promise&lt;String&gt;((resolve, reject) =&gt; {
              let urlString = Config.apiUrl + "profile/signS3?fileName=" + this.fileName + "&amp;fileType=" + this.fileType;
              console.log(urlString);
  
              xhr.open("GET", urlString);
              xhr.onload = () =&gt; {
                  resolve(xhr.response);
              }
              xhr.onerror = () =&gt; {
                  reject(xhr.response)
              }
              xhr.send();
          })
              .then(() =&gt; {
                  console.log(JSON.parse(xhr.responseText));
                  let response: SignS3Response = &lt;SignS3Response&gt;JSON.parse(xhr.responseText);
                  return this.uploadFile(response.signedRequest, response.url);
              })
      }
      uploadFile(signedRequest, url) {
          return new Promise&lt;String&gt;((resolve, reject) =&gt; {
              return new Promise&lt;String&gt;((resolve, reject) =&gt; {
              var xhr = new XMLHttpRequest();
              xhr.open("PUT", signedRequest);
              xhr.setRequestHeader('x-amz-acl', 'public-read');
              xhr.onload = () =&gt; {
                  console.log("onload, outside", JSON.stringify(xhr));
                  if (xhr.status === 200) {
                      console.log('Uploaded!');
                  }
              };
              xhr.onprogress = () =&gt; {
                  console.log("Progress!");
              }
              xhr.onerror = () =&gt; {
                  alert("Could not upload file.");
              };
              xhr.send(fs.File.fromPath(this.filePath));
                  });
              }
        });
  }
  </code></pre>
  
  <p>Getting the signed request is working fine but when I send it off to amazon to be uploaded I get this back:</p>
  
  <pre><code>{
    "UNSENT": 0,
    "OPENED": 1,
    "HEADERS_RECEIVED": 2,
    "LOADING": 3,
    "DONE": 4,
    "_responseType": "",
    "_listeners": {},
    "_readyState": 4,
    "_options": {
      "url": "https://mmprofilesimages.s3.amazonaws.com/1464833363226.png?AWSAccessKeyId=AKIAJCKL57PAMZB54LAQ&amp;Content-Type=png&amp;Expires=1464833423&amp;Signature=vOCsVChKe%2BDfH9PtXmPLuKtQ2cs%3D&amp;x-amz-acl=public-read",
      "method": "PUT",
      "headers": {
        "x-amz-acl": "public-read"
      }
    },
    "_errorFlag": false,
    "_response": {},
    "_headers": {
      "Date": "Thu, 02 Jun 2016 02:09:22 GMT",
      "Server": "AmazonS3",
      "x-amz-id-2": "0SQdOho2g0/MRICX61fjEDXWZRn3IgSJRCnV86LO2OydSs87cCt/XWz0pwDqomr3TYzu3G44fcA=",
      "Content-Type": "application/xml",
      "Transfer-Encoding": "Identity",
      "x-amz-request-id": "44733A49B05581DF"
    },
    "_status": 403
  }
  </code></pre>
  
  <p>I know this works because I am doing it on in a typescript transcompiled blog, the only real difference is that, I am getting the file from the  part of my form and here I am using fs.File.fromPath().</p>
  
  <p>I even tried to make it go to my server where it is working, in my S3 logs, I have this line: a01fa7fe68cb4649bd0d6bc76055584010ef30abc23d1b8968ae1494dfde1dc8 benaychhio [02/Jun/2016:01:16:42 +0000] 128.177.172.220 - 2473BE6AA6033D7B REST.PUT.OBJECT 1464828438666.png "PUT /1464828438666.png?AWSAccessKeyId=AKIAJFUTN7F7VLAR2SCQ&amp;Content-Type=png&amp;Expires=1464828498&amp;Signature={Signature is here}&amp;x-amz-acl=public-read HTTP/1.1" 403 AccessDenied 333 - 4 - "-" "montMatchMobile/1.0 CFNetwork/758.3.15 Darwin/15.5.0" -</p>
  
  <p>Anyone have any advice on this? I also tried nativescript-background-html but I am not getting anything back from that.</p>