Hey everyone, I'm new here and just starting to dive into the AWS stack. I have a React/NodeJS application where I'm trying to upload photos to S3, but I'm running into a frustrating 500 error. Here's what I've done so far: I set up AWS Amplify and successfully deployed my app. I created a Lambda function that handles the photo uploads and exposed it through API Gateway. The S3 bucket is also created with all the necessary permissions. I struggled a bit with CORS initially, but I think I've covered all the required headers.
When I attempt to upload images, the workflow goes like this:
1. An OPTIONS call (which I think is a CORS preflight check)
2. A POST call to get the upload URL from S3
3. Finally, a PUT call to save the photo.
However, that last step is resulting in a 500 error because it seems to be pointing to an undefined endpoint. I'm getting zero information from the logs, which isn't helping much. Any thoughts on what I might be missing or where I should look to fix this?
4 Answers
Make sure you're logging useful debugging info in CloudWatch. A better method would be to have your API return presigned URLs for the S3 bucket, which your React client can then use to upload directly.
If you're using Lambda for the upload, make sure it's actually going through API Gateway. Remember that API Gateway has some limits on time and payload size. A good alternative is to use the frontend to get a presigned URL and upload directly to S3; this way, you can trigger a Lambda function for post-processing when a file gets created in S3.
The OPTIONS call is just the browser checking CORS permissions. If your Lambda function isn’t sending back the right CORS headers in its response—especially for the PUT request—then S3 may block that request, even if the URL looks correct.
Yeah, I noticed the POST is getting the right URL for the Lambda function, but the PUT is going to an undefined endpoint. It’s also strange that I can’t find any logs detailing the error. In the browser's developer tools, it shows a 500 status code and says "Failed to generate upload URL."
Honestly, it's better not to use Lambda for document uploads. Just create a presigned URL through your API, then return that so your app can upload directly to S3. Check the AWS SDK documentation for more details on how to do this!
Thanks for the tip—I’ll check that out!
Yes, the requests are routed through API Gateway. The front end requests the upload URL first, then uses that for S3 uploads.