React x AWS | How to Upload to AWS S3 Using Pre-signed URLs
ฝัง
- เผยแพร่เมื่อ 26 มิ.ย. 2021
- 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 TH-cam, 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 - aws.amazon.com/blogs/compute/...
2. AWS TH-cam Tutorial - • Serverless File Upload...
3. AWS GitHub Repo - github.com/aws-samples/amazon...
4. My GitHub Repo - github.com/AllardQuek/react-demo
5. CORS - • CORS in 100 Seconds
![[ไฮไลต์] แบดมินตันหญิง ไท่ ซือ หยิง vs เมย์ รัชนก อินทนนท์ รอบแบ่งกลุ่ม | โอลิมปิก 2024](http://i.ytimg.com/vi/LUCG0H5qkpQ/mqdefault.jpg)
Did you run into any bugs? Feel free to drop a comment below if you have any questions!
hi how to do the upload process from getuploadparams function?
@@jijithjayakumar9967 Hi! Sorry I have not tried that, are you running into any errors specifically?
Now we must have const s3 = new AWS.S3({signatureVersion: 'v4'}) which adds a few more header options for the put request.
@@QSeaO yes yes yes yes yes! this should be pinned to the top of the top. Thanks so much.
if any of you are finishing this tut and getting an error in postman about 'signature does not match' add the const s3... noted above to your lambta function!
such a great help. The one change I had to make was the body of the PUT f instead of f["file"]. Using the latter uploaded a 0 byte file to S3 and gave a 200 response.
That's great Kevin! Let me know if you have any other feedback or suggestions for future videos 👍
Thank you, this was very helpful.
Thank you! Feel free to subscribe and checkout my other videos as well!
Thanks a lot! Your video helped me a lot! God bless you buddy!
Thank you Dhruva! That means a lot. Feel free to subscribe and let me know if you have any suggestions for future videos. Take care!
Awsome Tutorial
Thank you! Feel free to let me know if you have any suggestions for future videos :)
thank Youuuuuuu , you saved my life
You’re welcome! Feel free to check out my other videos and subscribe 👍
i am gettinf file content type from frontend while generating uplaod presigned url,
but what is the need
even if i dont get content type everything is uplaoded
and also if i want download presigned url everything is download also perfectly
why this content type is needed explicitly?
Excellent video, it helped me a lot. But i have a question. What if I want to uplaod more than 1 image at once?
Thank you! I have not tried uploading more than 1 image, but I would think you could make multiple requests to the same endpoint to generate more pre-signed URLs.
Just sub'd to your channel, please do more with React and AWS. Thanks!
Thank you! Let me know if you have anything particular in mind. Feel free to check out my other videos as well! 👍
Hey I am getting Reference error in the getPresignedUrl Lamda function test
Hi sir, what if i get 204 status (not content) but upload file successfully? I cant find my problem, will it be my AWS config problem or code?
How would I upload the image, edit the photo, have it go to s3, then delete the image saved on our computer. In addition, what would I change to let it accept any file type?
For the first step, are you uploading to S3? And are you editing the photo locally or on your website?
To delete the image saved on your computer, you can try executing shell commands such as ‘rm image.jpeg’. And to accept any file type the file type would just be ‘*’.
Thanks for the video! how would retrieving the image work? Would the image be retrieved from the client or from lambda then passed to the client?
Do you mean sending the image back to the client? In the video, the image is sent via a PUT request to S3. Then if you want to programmatically access the image from S3, I believe the Python SDK for S3 provides methods that should help with this.
Okay first of all,
So if you have follwed this video till the very end then, you must be aware that you get a "result" which instructor is console.loging it as
console.log("result",result)
This result is an object which further has url object inside it. ( That is you can access it with result.url )
(Just in case anyone gets confused , url is urL)
Now the http link to access the image is this:- result.url.split('?')[0]
console.log("Put this link in browser to access or View the image file", result.url.split('?')[0] )
Also You need to do the below work first
You need to edit or update your s3 bucket policy to the following:-
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicRead",
"Effect": "Allow",
"Principal": "*",
"Action": [
"s3:GetObject",
"s3:GetObjectVersion"
],
"Resource": [
"arn:aws:s3:::DOC-EXAMPLE-BUCKET/*"
]
}
]
}
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Hi, i am trying to create my lambda function and get this error "require is not defined in ES module scope, you can use import instead" , using node 18.0x , any suggestions?
Hi Ilay, it's difficult to say. From a quick search, I would suggest playing around with the "type" field in your package.json file, such as: "type":"commonjs"
@@ProgrammerError How do you access the package.json file in the lambda function?
in the tutorial you copy the code for 'single file auto submit' but in your example app there is a submit button. My guess is that you copied from a different dropzone uploader that has a submit button.
New to AWS and Lambda with API GW, but when i run Postman to the API GW that is created from Lambda trigger, i get message: internal server error. Any idea what that is?
Sounds like it could be an issue with the API endpoint or configurations
Did you figure it out bro?
The image url put request return me it give access denied error, i want to save it in my DB
Hm, not sure why that might be the case. Maybe you need to configure your permissions correctly?
After uploading the image I am not getting Submit page
How do I store files in a folder and the name of that folder should be of mine choice?
Do you mean storing files in AWS S3 buckets? Anyway, you should be able to provide the name (or rename) buckets or folders, whether on AWS or locally.
How to get s3 bug status like file upload success in reactjs
Hi Ganesh, what do you mean bug status?
How to use it for multiple images?
I have not tried this specifically, but are you running into any issues in particular? I might be able to help.
Is it safe? Like free from hackers? No 3rd party interaction is possible?
How to upload pdf with this method? can you please give a reference
Hi Akshay, maybe try changing the Content Type to .pdf?
how to renaming the filename upload ?
If you want to rename after the upload, you can do it directly in Amazon S3. If you want to generate/customize the filename, you can refer to my Medium post here: medium.com/@allardqjy/using-pre-signed-urls-to-upload-files-to-amazon-s3-from-reactjs-5b15c94b66df where I point out where you can customize the filename.
If your looking for how to upload a file to S3 Programatically using AWS CLI in command prompt for uploads then check out this link th-cam.com/video/AcdUHv5xjPo/w-d-xo.html
Hi , Thanks for your video, it's helped me lot, I just wanted to know how to get response( file name, path, and bucket-name ) to store in database. My Code is :
......data
try {
const parellelUploads3 = new Upload({
client: new S3Client({
region: "ap-south-1",
credentials: { accessKeyId, secretAccessKey },
}),
params: target,
});
parellelUploads3.on("httpUploadProgress", (progress) => {
console.log("process", progress);
});
parellelUploads3
.done()
.then((res) => {
console.log("res", res); // this response is not satisfied my requirement
})
.catch((error) => {
console.log("error", error);
});
} catch (error) {
console.log(error);
}
Sorry, it's a bit difficult for me to debug right now even with the code. Are you facing any issue in particular?
@@ProgrammerError Code is working but the bucketname and rest details is not available in response. if i get it i can easily validate and store it into database