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
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.
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
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 ?
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?
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.
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.
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.
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?
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
@@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
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?
@@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?
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 :)
Thanks for this great tutorial. Exactly what I needed. Really appreciate it.
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.
This works like a charm. Thanks, @FelixYu
Glad that u found it helpful mate!!
Excellent content, keep it up bro
Is there a link to the repo? Does this support multiple file uploads?
Very nice Felix!
tyty
I'm a little lost. I don't know how to access the event body. ( I am new to Javascript and AWS ).
Thanks, this is a gem!
Glad that u found it helpful!!
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:
ruclips.net/video/7T5VbMEJStQ/видео.html
Thank you! This is so helpful!
Glad that it helped 👍
Could you please upload same video for image upload?
here is the another video i have that shows how to upload images:
ruclips.net/video/7T5VbMEJStQ/видео.html
Great video!
Thanks man!!
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 ?
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:
ruclips.net/video/7T5VbMEJStQ/видео.html
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?
hey this does not work for audio files. can you recommend changes for that
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.
Followed all the steps but still getting an error: "No 'Access-Control-Allow-Origin' header is present on the requested resource." anyone else?
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..
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 ${}
how to upload images ???, please help
can you provide a link to github repo?
Can you please provide me source code for this? Thanks in advance
Could you please share the upload file system code?
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
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?
good effert but where is the code ????
Can you please help me in uploading pdf file
yes, here is the video that shows how to upload pdf files:
ruclips.net/video/7T5VbMEJStQ/видео.html
code link plz?
This video is missing very important information for the AWS side. Incomplete tutorial.
how the bad behaviour is that we support you through like comment and subscription and you can't share the code...
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
its my requist to you to please provide source code plz sir
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:
ruclips.net/video/7T5VbMEJStQ/видео.html
provide source code plzzzz
can anyone please tell me from where to get the code at 20:30
I solved the CORS error by replacing:
require('./AWS-SDK')
with:
const { S3Client, PutObjectCommand } = require("@aws-sdk/client-s3");
I did not understand how did you change "const AWS = require(...)" in const {S3Client, PutObjectCommand} =..... then how did you instance AWS object?
@@Ginnak this important allows you to create an s3 object using s3client
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 :(