I'm trying to upload a file to S3 directly from browser. For this, I'm generating a signed upload URL on my server.
When I try to upload a file to the generated url from the browser using
var xhr = new XMLHttpRequest();
xhr.open('PUT', signedUrl);
xhr.send(file);
I get the following error
<Error>
<Code>
SignatureDoesNotMatch
</Code>
<Message>
The request signature we calculated does not match the signature you provided. Check your key and signing method.
</Message>
...
</Error>
I can upload to the signed URL using curl with the following command
curl -T <file> -X PUT '<signed-url>'
The browser is sending my request as multipart-form data which is causing the problem. How do I fix the issue?
I'm generating the signed URL using the following code
var params = {
Bucket: bucket,
Key: s3Key,
ACL: "authenticated-read",
Expires: 600
};
S3.getSignedUrl('putObject', params, (err, data) => {
const returnData = {
url: data
};
reply(returnData);
});
Edit: Just to be clear, I have allowed all origins to send PUT requests in bucket CORS configuration.
Okay, the problem was that Content-Type was being sent by the browser in the request header but the signed url wasn't being generated for the content type. Instead of this
var params = {
Bucket: bucket,
Key: s3Key,
ACL: "authenticated-read",
Expires: 600
};
S3.getSignedUrl('putObject', params, ...);
I did this
var params = {
Bucket: bucket,
Key: s3Key,
ACL: "authenticated-read",
Expires: 600,
ContentType: require('mime').lookup(filename)
};
S3.getSignedUrl('putObject', params, ...);
and it worked!