Question
Upload AWS S3 getSignedUrl with correct permissions and Content Type
Hi there,
I am trying to upload assets through the getSignedUrl method that the aws-sdk provides, a NodeJS backend with Axios where the upload happens from a VueJS 2 frontend. Now whatever combination i try, or the file is able to upload but always sets it to private and the wrong Content-Type, or i get 403 permission errors.
What i want to do is that the upload has an ACL that is public-read and the correct Content-Type.
The following is the code that i use:
To get a signed Url
const s3 = new AWS.S3({
accessKeyId: keys.spacesAccessKeyId,
secretAccessKey: keys.spacesSecretAccessKey,
signatureVersion: 'v4',
endpoint: 'https://fra1.digitaloceanspaces.com',
region: 'fra1'
});
app.get('/api/upload/image', (req, res) => {
const type = req.query.type;
s3.getSignedUrl('putObject', {
Bucket: 'vondel',
ContentType: type,
ACL: 'public-read',
Key: 'random-key'
}, (error, url) => {
if (error) {
console.log(error);
}
console.log('KEY:', key);
console.log('URL:', url);
res.send({ key, url });
});
});
This provides a signed url that looks like:
https://BUCKET.REGION.digitaloceanspaces.com/images/e173ca50-fafe-11e9-b18c-d3cfd4814069.png?Content-Type=image%2Fpng&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=NSX3EZOFXE57BAFSKDIL%2F20191030%2Ffra1%2Fs3%2Faws4_request&X-Amz-Date=20191030T102022Z&X-Amz-Expires=900&X-Amz-Signature=f6bcdcd35da5dc237f881a714ec9ca09cb7aa3f3ffbd2389648a7c30808ab56e&X-Amz-SignedHeaders=host%3Bx-amz-acl&x-amz-acl=public-read
Then for actually uploading the file i use the following:
await UploadService.uploadImage(uploadConfig.data.url, file, {
'x-amz-acl': 'public-read',
'Content-Type': file.type
});
With the service looking like:
async uploadImage (url, file, headers) {
await axios.put(url, file, headers.headers);
}
These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.
×
Thanks @treurmars I have spent way too long on this exact issue! Thanks for taking the time to post this.