I am facing an issue while attempting to upload a file to AWS S3 using aws-sdk v3 within a Vue Component of a Nuxt app.
Here is the process I follow for the upload:
<script>
export default {
...
methods: {
onSubmit(event) {
event.preventDefault()
this.addPhoto()
},
addPhoto() {
// Loading necessary clients and packages
const { CognitoIdentityClient } = require('@aws-sdk/client-cognito-identity')
const { fromCognitoIdentityPool } = require('@aws-sdk/credential-provider-cognito-identity')
const {
S3Client,
PutObjectCommand,
ListObjectsCommand,
DeleteObjectCommand,
} = require('@aws-sdk/client-s3')
const REGION = 'us-east-1' // REGION
const albumBucketName = 'samyojya-1'
const IdentityPoolId = 'XXXXXXX'
const s3 = new S3Client({
region: REGION,
credentials: {
accessKeyId: this.$config.CLIENT_ID,
secretAccessKey: this.$config.CLIENT_SECRET,
sessionToken: localStorage.getItem('accessToken'),
},
})
var file = this.formFields[0].fieldName
var fileName = this.formFields[0].fieldName.name
var photoKey = 'user-dp/' + fileName
var s3Response = s3.send(
new PutObjectCommand({
Bucket: albumBucketName,
Key: photoKey,
Body: file,
}),
)
s3Response
.then((response) => {
console.log('Successfully uploaded photo.' + JSON.stringify(response))
})
.catch((error) => {
console.log(
'There was an error uploading your photo: Error stacktrace' + JSON.stringify(error.message),
)
const { requestId, cfId, extendedRequestId } = error.$metadata
console.log({ requestId, cfId, extendedRequestId })
})
},
...
}
</script>
The current problem is that CORS is causing issues in the browser.
https://i.stack.imgur.com/8IV3N.png
This is my configuration for CORS on AWS S3
https://i.stack.imgur.com/GCKq6.png
- I suspect there might be an issue in creating the upload request using the SDK. (I'm willing to explore better API options)
- Check Nuxt settings for CORS permissions.
- Review other configurations related to S3 CORS permissions.
- Chrome dev tools Network tab shows Internal Server Error (500) for prefetch. (Not sure why there are 2 entries) https://i.stack.imgur.com/WPUtx.png https://i.stack.imgur.com/UIJaY.png Any guidance on debugging this would be highly appreciated.