Awesome tutorial man. I’ve been trying to do this for a while now and the guides are usually too hard and I mess up but yours was perfect. I can finally use AWS S3 again! Do you plan on making the authorized version of this guide any time soon?
@@Grepsoft I completely understand. Back when I first started programming, I was learning Ruby on Rails and all you had to do back then was use a secret code and ID to configure the S3 gem I was using. I can’t remember the gem name, it’s been 4+ years and I’m now coding with node and react and python. Anyway, AWS updates the process for better security and that broke the gem. Ever since then, I occasionally try to rebuild that experience in Node, and I watched several other videos on this matter and it’s like I either missed something small or I am just stupid, but I couldn’t ever get it to work, but with yours, I finally got it working right! Thus, so now id like to learn how to configure authorized access and setup OAuth 3rd party ID providers too. If I can learn that, that would put me ahead quite a bit as I’m trying to switch to backend development, I’ve been a professional front end dev for 3+ years now, and I’m ready to switch once I can figure out (most of) at least one major cloud service and AWS is the most used so it may as well be the one I set up. If you don’t mind, do you have any recommendations for me in the mean time? Thanks so much!!
i need to upload to bucket which need access key and access id but I don't know how to config It in the code so if you have a vid where you upload to a authorized bucket it would be much appreciated
Is it safe to put the id into public folders / git? Shouldn't it be in .env like API keys? I really don't know but I would like to avoid pushing something sensitive into the public eye
In a production app I would make the client make a call to backend e.g. node and then yes, you are right put the credentials in an env file on the server side.
@@Grepsoft Thanks for answering! Sorry for responding late but I have another question and I wonder if you could help me out. I try to use "Storage.get" to get an image from my db dynamically. The code looks like this: useEffect(() => { fetchData(); }, []) const fetchData = () => { Storage.get(('panoramas/' + data.image + '.jpg').toLocaleLowerCase()).then(img => { setImage(img); }).catch(error => console.log(error)) } basically the same as your code does for the Storage.list useEffect. But when I do it this way I get the following error: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. This error does not occur when I use a static path for the "Storage.get" so I suppose it has to do something with the data.image variable, but I don't know what's the problem. I tried using return in the useEffect hook, setting mounted to false, but this too did not do anything. I am trying to then pass down the image I have gotten from this function into a component, so maybe the component takes the data from the useState variable first, which is " ", and then it changes the value but stil uses the old data? I really don't know and if you have any ideas on how to make the useState work, I would be really thankful!
@@Holsp why are you passing the image down into a component? Why not load the image inside the component itself? And where does data come from? Is it being passed from somewhere else?
Great tutorial. One issue, I can click the Signed URL that the Storage.get() method returns, and download the image without an issue, but putting the response from that method as the src property of the image element is not displaying the image for me. Any ideas why this might be? Thanks.
Hi! Thank you so much for the tutorial. I have been trying to access the files but the repository looks empty. There is a way to access to the same files of the video?. Again, thank you for your help.
@@Grepsoft Thanks for your quick response! What I'm trying to say is that the repository at the description doesn't have the files you show in the video. In fact, I think it only has the files of a newly initialized React project.
Finally I got access to my S3 via React, thank you a lot!
Awesome tutorial, man! Thanks for it.
Do you have like: 'Buy me a coffee' or something like that?
thank you, yes it's here: buymeacoffee.com/?via=grepsoft
@@Grepsoft Done
@@Room3102 Thank you
Awesome tutorial man. I’ve been trying to do this for a while now and the guides are usually too hard and I mess up but yours was perfect. I can finally use AWS S3 again! Do you plan on making the authorized version of this guide any time soon?
Yes, definitely soon. My problem is I have too many projects on the go lol. I am hoping to find some time.
@@Grepsoft I completely understand. Back when I first started programming, I was learning Ruby on Rails and all you had to do back then was use a secret code and ID to configure the S3 gem I was using. I can’t remember the gem name, it’s been 4+ years and I’m now coding with node and react and python. Anyway, AWS updates the process for better security and that broke the gem. Ever since then, I occasionally try to rebuild that experience in Node, and I watched several other videos on this matter and it’s like I either missed something small or I am just stupid, but I couldn’t ever get it to work, but with yours, I finally got it working right! Thus, so now id like to learn how to configure authorized access and setup OAuth 3rd party ID providers too. If I can learn that, that would put me ahead quite a bit as I’m trying to switch to backend development, I’ve been a professional front end dev for 3+ years now, and I’m ready to switch once I can figure out (most of) at least one major cloud service and AWS is the most used so it may as well be the one I set up. If you don’t mind, do you have any recommendations for me in the mean time? Thanks so much!!
@@Sindoku here you go: th-cam.com/video/Rkjx6h5v078/w-d-xo.html
i need to upload to bucket which need access key and access id but I don't know how to config It in the code so if you have a vid where you upload to a authorized bucket it would be much appreciated
Do you have a tutorial on authorized uploading as you mention around 2:15 ?
Are you looking for user auth and stuff? Is this helpful?
th-cam.com/video/kuVUUo5GZag/w-d-xo.html
@@Grepsoft Yes, I am looking for something with AWS authentication though. Something with Cognito and/or Amplify?
Is it safe to put the id into public folders / git? Shouldn't it be in .env like API keys? I really don't know but I would like to avoid pushing something sensitive into the public eye
In a production app I would make the client make a call to backend e.g. node and then yes, you are right put the credentials in an env file on the server side.
@@Grepsoft Thanks for answering! Sorry for responding late but I have another question and I wonder if you could help me out. I try to use "Storage.get" to get an image from my db dynamically. The code looks like this:
useEffect(() => {
fetchData();
}, [])
const fetchData = () => {
Storage.get(('panoramas/' + data.image + '.jpg').toLocaleLowerCase()).then(img => {
setImage(img);
}).catch(error => console.log(error))
}
basically the same as your code does for the Storage.list useEffect. But when I do it this way I get the following error:
Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
This error does not occur when I use a static path for the "Storage.get" so I suppose it has to do something with the data.image variable, but I don't know what's the problem.
I tried using return in the useEffect hook, setting mounted to false, but this too did not do anything.
I am trying to then pass down the image I have gotten from this function into a component, so maybe the component takes the data from the useState variable first, which is " ", and then it changes the value but stil uses the old data? I really don't know and if you have any ideas on how to make the useState work, I would be really thankful!
@@Holsp why are you passing the image down into a component? Why not load the image inside the component itself? And where does data come from? Is it being passed from somewhere else?
Great tutorial. One issue, I can click the Signed URL that the Storage.get() method returns, and download the image without an issue, but putting the response from that method as the src property of the image element is not displaying the image for me. Any ideas why this might be? Thanks.
are you able to place the image in a browser and see what you get?
Hi! Thank you so much for the tutorial. I have been trying to access the files but the repository looks empty. There is a way to access to the same files of the video?. Again, thank you for your help.
You mean the code repository? Please check the description.
@@Grepsoft Thanks for your quick response! What I'm trying to say is that the repository at the description doesn't have the files you show in the video. In fact, I think it only has the files of a newly initialized React project.
@@MrDagonzin sorry, please check now. I checked in.
@@Grepsoft Thank you for updating it. I appreciate your effort. :D
@@MrDagonzin no problem. Please like and subscribe as it encourages me to make great content :)
Cognito is not available in my region, any other solution? @Grepsoft
You would have to fine other storage solution like Google, digital ocean or dropbox.
hi can i please the code repository link that will be helpful a lot,
Thanks for this session it helped me a lot
please check the description. I have added it there.