AWS S3 upload with react-dropzone-s3-uploader

I use this react-dropzone-s3 which built on top of react-s3-uploader to work on my site upload box and run into problems with AWS S3 Credential/CORS so I think I would put it here in case someone out there run into the same issue

1. Global AWS_ACCESS_KEY_ID

This lib want you to config process.env.AWS_ACCES and process.env.AWS_SECRET_ACCESS_KEY

This is a problem for me since AWS recommend us to no longer use global access key and instead create different users and opt-in credentials for different tasks. So, I have different credentials for different tasks in my project (like S3 user, SES user, EB user). Setting this global AWS_ACCESS_KEY is not a good approach for me.

I try to find a way to pass AWS Config to options but couldn’t. I would recommend devs with free time to create a pull request to allow passing key and secret to options (https://github.com/odysseyscience/react-s3-uploader/blob/master/s3router.js#L13)

Anyway, in case you don’t know how to set process.env, you could use dotenv or you can just set it like process.env.AWS_ACCESS_KEY_ID = abc . I do hope you already know how to generate AWS key/secret but in case you don’t : go to your AWS console and look for IAM service.

2. S3 CORS

First you need to understand that before we put image to S3, we need to obtain AWS signed url which is the url that allow client(browser) to send PUT request to S3 bucket. The lib already do that for you so if you plug it to express right, you should be able to get your signed url from http://localhost:xxxx/s3/sign

Before you start working with your pretty React component, you should make sure that this URL is valid. You need to use some kind of POSTMAN tool with PUT request to try this URL. Testing with GET or typing it in browser will result you with

<Code>SignatureDoesNotMatch</Code>
<Message>
The request signature we calculated does not match the signature you provided. Check your key and signing method.
</Message>

I see many people struggle with this error (including me). If the URL works, you should see blank response. If it does not, and you are sure your key and secret are correct, then it’s likely to be a CORS problem.

<Code>AccessForbidden</Code>
<Message>CORSResponse: This CORS request is not allowed. This is usually because the evalution of Origin, request method / Access-Control-Request-Method or Access-Control-Request-Headers are not whitelisted by the resource’s CORS spec.</Message>
<Method>PUT</Method>

By default, AWS S3 does not allow PUT in CORS so you need to go to your bucket -> CORS configuration and add PUT method and AllowHeader like image below.

and you should be able to obtain signed url

These are two issues I found so far using this lib. Hope this help :)

Pongsakorn Semsuwan

Written by

Product Owner @Sunday Ins.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade