React x AWS | How to Upload to AWS S3 Using Pre-signed URLs
Uploading a file to Amazon S3 was something I thought would be relatively simple and common to do. There are a number of resources available on Youtube, Stackoverflow and AWS' own documentation and blog, but at least as of now they are not the easiest things to follow especially for beginners and even more so when you run into errors. There is a lot of configuration that goes on behind the scenes to do this simple task via this method, and unfortunately AWS error messages can be rather vague which makes it difficult to pinpoint exactly where the problem lies.
In this video, I decided to try something I haven't done before on this channel, which is to go through the process from scratch and leaving IN the errors I ran into along the way and going through where and how to find relevant resources to get things set up. It might not be the clearest explanation, but I hope this provides anyone watching a better understanding of the file upload process to Amazon S3 using pre-signed URLs. If you find it helpful, do like and share the video, and consider subscribing for more of such videos :) Lastly, feel free to drop a comment below if you have any questions or know of a better way to do this!
Read on for more details and resources 🙂
Timestamps (to be added):
Steps Summary:
1. Set up Uploader component
2. Install libraries: axios and dropzone
4. Create S3 bucket
5. Enable CORS for S3 bucket
6. Create AWS Lambda function
7. Enable S3 access for Lambda function IAM role
9. Test Lambda function
8. Create HTTP API Endpoint using Amazon APIGateWay
10. Test endpoint with Postman
11. Finish up Uploader
12. Test endpoint in application
Mistakes Made (non-exhaustive):
1. Creating "components" folder in the wrong directory
2. Importing libraries into the wrong file
3. Not matching brackets when copying JSON
4. Forgetting to deploy Lambda changes
5. Copying pre-signed URL wrongly
6. Using the wrong attribute to get File object
7. Using wrong attributes to access pre-signed URL
Resources:
1. AWS Blog Post - https://aws.amazon.com/blogs/compute/...
2. AWS Youtube Tutorial - • Serverless File Uploads using S3 and ...
3. AWS GitHub Repo - https://github.com/aws-samples/amazon...
4. My GitHub Repo - https://github.com/AllardQuek/react-demo
5. CORS - • CORS in 100 Seconds