How to Build a File Upload System on AWS with React and a Serverless API | Lambda, S3, API Gateway
ฝัง
- เผยแพร่เมื่อ 8 ก.ย. 2021
- This video provides a detailed step by step instruction on how to build a file upload system on AWS with React.js in the frontend and a Serverless API in the backend.
Support the channel plz 😊: www.buymeacoffee.com/felixyu
video on how to build a login system/web page: • Build an Authenticatio...
video on serverless APIs in details: • Build a CRUD Serverles...
video on API authentication with API keys: • API Authentication via...
video on how to host a website with a custom domain and HTTPS: • Host a Website on AWS ...
link to get the s3 bucket policy: jinmeister.com/aws/individual...
![[Live] : ONE FIGHT NIGHT 23 วันนี้!! “เร ยุน vs อาลิเบก”](http://i.ytimg.com/vi/ClLQVYWSrUk/mqdefault.jpg)
Thanks for this great tutorial. Exactly what I needed. Really appreciate it.
Important detail you left out that was causing a CORS error for me. When you are building your file-processing-service.js file inside your Lambda function, you call util.buildResponse(200). You left out the 2nd parameter, (200, requestBody). This worked for me
thaaaaaaank you very much bro for those informations you deserve maanyyy likes
Thanks a lot :)
Excellent content, keep it up bro
Very nice Felix!
tyty
Hi Felix, Thank you for producing informative content. I request you to create a video tutorial of uploading image on AWS with React, so that it gets resized and displays back on the frontend.
God bless you.
Thanks, this is a gem!
Glad that u found it helpful!!
This works like a charm. Thanks, @FelixYu
Glad that u found it helpful mate!!
Great video!
Thanks man!!
Thank you! This is so helpful!
Glad that it helped 👍
Is there a link to the repo? Does this support multiple file uploads?
I was able to resolve the cors issue. The code needs to be updated to use nodejs18, or select the runtime for nodejs accordingly. But I need help to understand how we can upload images or pdf files, and also how to upload multiple files in this manner.
hello, new that we created the api, how can i use this API in react, in your other video you were using a lambda service, but can we do this without lambda?
Thanks for the video, i followed your steps it works but the issue was that the uploaded file details was correct in cloudwatch log but in my s3 bucket i have ''${s3Subfolder}/${fileName}' just as in the lambda code. please kindly advice.
Make sure u use the back tick symbol not a single quotation mark when u define ${}
hey this does not work for audio files. can you recommend changes for that
Everything is working well , but the upload action is not happening and I can't able to see the text file in S3 bucket , Need help in this ?
not sure if Felix is still active on this channel...anyway, has anyone managed to successfully upload an image to their S3 bucket and be able to download/view it without error? Been trying to troubleshoot this by modifying the lambda function to accept content type "image/jpeg" as well as convert the filecontent to base64 encoding but i keep getting an error message involving the cors header origins....would appreciate any help if anyone has managed to accomplish an image upload. Thanks
@mingyu2780 here is another video i have that works for images as well:
th-cam.com/video/7T5VbMEJStQ/w-d-xo.html
can you provide a link to github repo?
Could you please upload same video for image upload?
here is the another video i have that shows how to upload images:
th-cam.com/video/7T5VbMEJStQ/w-d-xo.html
Could you please share the upload file system code?
I'm a little lost. I don't know how to access the event body. ( I am new to Javascript and AWS ).
Can you please provide me source code for this? Thanks in advance
Hello. Does this support all file types like images (.jpg or.png)?
I am interested in the same question
Just tested on jpg and it appears in the s3 bucket no issue
hmm it appears when i download it and tried to view it, the message "it appears that we don't support this file format" and i noticed the value under the metadata value for uploaded image is showing as "application/octet-stream" instead of "image/jpeg" ....is there anything we should change on the lambda function ?
@@lute248 any luck getting it to work with other files
here is another video i have that shows how to upload images:
th-cam.com/video/7T5VbMEJStQ/w-d-xo.html
Felix...how come you use class component in 2021? anyway thank you for doing it from scratch!
Haha I haven’t done frontend work for a long time. What is the trend now??
@@FelixYu hey forgot to delete my comment, I really enjoyed your video. Now trend: Functional components since 2018-2019
@@FelixYu Git Hooks and functional objects..
can anyone please tell me from where to get the code at 20:30
how to upload images ???, please help
When trying to upload I keep on getting "has been blocked by CORS policy No access-control-allow-origin header is present in the requested resource" although I do have them set as "*" in file util.js. What can it be?
make sure u have the correct headers in the response in the lambda (23:26 of the video)
@@FelixYu Hi Felix, i have encountered the same issue with CORS policy Access-Control-Allow-Origin of '*' error. Had redone it and had make sure there is no typo error. But still it's not working. Any idea what had went wrong?
@@FelixYu - Same issue over here.
did u check "Enable API Gateway CORS" in api gateway (14:29 of the video)?
Same issue here :(
How can we upload pdf in place of txt file, im trying to upload that the file uploads but when I open it its says --
Error
Failed to load PDF document.
is that an error from the lambda function or from the react frontend??
@@FelixYu I have tried numerous ways, finally going with base64 encoding.But same issue. How can I contact you??
@@AkashBhalla hmm converting it to base64 should work....try to follow this and see if it works
github.com/CODEZ-UP/pdfToBase64/blob/master/src/App.js
@@FelixYu thanks
Followed all the steps but still getting an error: "No 'Access-Control-Allow-Origin' header is present on the requested resource." anyone else?
good effert but where is the code ????
I'm getting a 400 error when i post to my api, any ideas why?
I had the same issue. As far as I know, status code 404 means either the API path is wrong or there is a typo in the code. What was the problem with your code?
Can you please help me in uploading pdf file
yes, here is the video that shows how to upload pdf files:
th-cam.com/video/7T5VbMEJStQ/w-d-xo.html
code link plz?
it will me more better if you upload all the code on github so that we can test it and this will avoid typo mistake
please share the source code
the source code is already uploaded to my github. link is in the description
@@FelixYu I can't find the github link source code
@@ianjheferguevarra4345 the same!
@@ianjheferguevarra4345
He removed it from his github
how do you remove ------WebKitFormBoundary5xOkojIBpXqoCtdp
Content-Disposition: form-data; name="demo file"; filename="simple.json"
Content-Type: application/json from the top of the file with out effecting the rest of the file
u will need to parse the string in ur code logic
@@FelixYu where’s the link to your repo? I still can’t figure out how to upload the image. The image that gets stored on S3 is still in “application/octet” even when i define the content type in lambda to be image/jpeg I set and I can’t download/open it
@@lute248 here is another video i have that shows how to upload images:
th-cam.com/video/7T5VbMEJStQ/w-d-xo.html
its my requist to you to please provide source code plz sir
how the bad behaviour is that we support you through like comment and subscription and you can't share the code...
This video is missing very important information for the AWS side. Incomplete tutorial.
provide source code plzzzz