I'm building an app on the MEAN (MongoDB, Express, AngularJS, node.js) stack that requires uploading image files to Amazon S3. I'm doing it in the following way:
First, an http get
is sent to my API, which specifies the 'policy document' for the interaction and returns it to the AngularJS frontend. That backend code looks like this (with the variables filled in):
exports.S3Signing = function(req, res) {
var bucket = "MY_BUCKET_NAME",
awsKey = "MY_AWS_KEY",
secret = "MY_SECRET",
fileName = req.params.userId,
expiration = new Date(new Date().getTime() + 1000 * 60 * 5).toISOString();
var policy = {
"expiration": expiration,
"conditions": [
{"bucket": bucket},
{"key": fileName},
{"acl": 'public-read'},
["starts-with", "$Content-Type", ""],
["content-length-range", 0, 524288000]
]};
policyBase64 = new Buffer(JSON.stringify(policy), 'utf8').toString('base64');
signature = crypto.createHmac('sha1', secret).update(policyBase64).digest('base64');
res.json({bucket: bucket, awsKey: awsKey, policy: policyBase64, signature: signature});
};
The frontend (AngularJS) code for this process looks like this:
$http.get('/api/v1/auth/signS3/' + userId).success(function(data, status) {
var formData = new FormData();
formData.append('key', userId);
formData.append('AWSAccessKeyId', data.awsKey);
formData.append('acl', 'public-read');
formData.append('policy', data.policy);
formData.append('signature', data.signature);
formData.append('Content-Type', image.type);
formData.append('file', image);
$http({
method: 'POST',
url: 'http://' + data.bucket + '.s3.amazonaws.com/',
headers: {'Content-Type': 'multipart/form-data'},
data: formData
}).success(function(data) {
deferred.resolve(data);
}).error(function(err) {
deferred.reject(err);
});
}).error(function(err, status) {
deferred.reject(err);
});
However, as it is currently, if I post an image I get the following error:
Malformed POST Request The body of your POST request is not well-formed multipart/form-data.
If I change the http POST call to the AngularJS shorthand and remove the "content-type": "multipart/form-data" specification, like such:
$http.post('http://' + data.bucket + '.s3.amazonaws.com/', formData).success(function(data) {
deferred.resolve(data);
}).error(function(err) {
deferred.reject(err);
});
I get the following error instead:
Precondition Failed At least one of the pre-conditions you specified did not hold Bucket POST must be of the enclosure-type multipart/form-data
I have tried any combination of conditions and specifications that I can think of. What am I missing here?