403 Signature not matched in uploading a file to AWS S3 with Pre-Signed URL and ng-file-upload from Browser

Question

I am using ng-file-upload to send a file to AWS-S3 in my angular app.

Upload.http({
  url: '/presignedurl',
  headers : {
    'Content-Type': file.type
  },
  data: file
})

It is giving me 403 Forbidden error saying

<Code>SignatureDoesNotMatch</Code>
<Message>The request signature we calculated does not match the signature you provided. Check your key and signing method.</Message>

Answer 1

AWS S3 needs binary/octet-stream so you can use FileReader class in JavaScript to convert file data to binary/octet-stream

Replace your code with this

var reader = new FileReader();
var xhr = new XMLHttpRequest();

xhr.open("PUT", $scope.url);
reader.onload = function(evt) {
   xhr.send(evt.target.result);
};
reader.readAsArrayBuffer($files[file]);