Los Angeles, CA

react-s3-uploader 403 error

react-s3-uploader 403 error

react-s3-uploader 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

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <ExposeHeader>x-amz-server-side-encryption</ExposeHeader>
    <ExposeHeader>x-amz-request-id</ExposeHeader>
    <ExposeHeader>x-amz-id-2</ExposeHeader>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

and voila our upload went through

Facebook Comments