How to setup react-s3-uploader and fix the 403 error
While looking at react-s3-uploader’s npm documentation it seemed really cool and the fastest way to get the job done
so on the react side all we had to add was
<ReactS3Uploader
className={'uploader'}
signingUrl="/s3/sign"
signingUrlMethod="GET"
accept=".doc,.docx,.pdf"
s3path="/uploads/"
onProgress={this.onProgress}
onError={this.onError}
onFinish={this.onFinish}
uploadRequestHeaders={{
'x-amz-acl': 'public-read'
}}
ref={fileInput => (this.fileInput = fileInput)}
contentDisposition="auto"
/>
and on the node side all we did was
app.use('/s3', require('react-s3-uploader/s3router')({
bucket: "<bucket name>",
ACL: 'private', // this is default
uniquePrefix: true // (4.0.2 and above) default is true, setting the attribute to false preserves the original filename in S3
}));
and boom time to upload the first file
So we clicked on the upload button the react component generated and wait for it wait for it
got a big giant 403
No documentation on react-s3-uploader github page about that and neither was it listed in issues
some research on AWS amplify showed that we needed bucket CORS configuration
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>
and voila our upload went through