Just adding extra timestamps for me in the future: 1:40 Firestore & project setup 4:10 Neccesary packages 5:00 Storage - get started 6:30 Firebase configuration Working in the React app 8:30 Adding file input and btns 11:23 Uploading an image(firebase code) 13:25 Randomize image name 14:50 Upload the image to firebase 16:48 How storage works 17:20 Display all images in the React app 23:25 Show new uploaded images automatically
you are amazing , clear and concise , i have not seen other tutorial that focuses just on the logic and not building unnecessary frontend stuffs . i can always keep my code original and make extension to more ideas . In short , your way of teaching is pure and phenonmenol.
I used cloudinary on my First project and it was little tedious ,and I was so frustrated to do it again on my second project , And thanks to U I finished my img upload functionality on my second project with no hassles , THAANKS bro
thank you very much for this simple project which helps to easily understand the basic concepts behind the upload process to firebase, I've just recently watched a video to do with this subject, it was simply a nightmare comparing to this one, it was like running without learning to walk :), huge thanks again
Hey Pedro, I love watching your tutorials. They are easy to follow and explained quite well. I just had another request, like can you please also make videos on some popular NPM libraries and how to use them in our codebase. That would really be helpful for a lot of people like me who rely on NPM libraries on a daily basis but can't find enough tutorials to fully understand their usage.
This is very useful thank you. But how would you upload images for specific items? Let's say that you want to allow users to upload products to the app, product should have a name, price, size and Image. So you create the form and connect it to Firebase database and uploads work fine for strings but with files (images) it's different. So how to connect the storage with code and with specific items in firebase?
The key is to use storage just as that - storage, so you upload image to firebase storage and then use the URL and put it in your actual database. Lets say you have Postgresql database and in your app you have a feature to share Posts, so you have Post table in your database, in that table you store values like: id, postName, postCreatedAt... and you also can add postImage and in postImage you store the link to an image stored in firebase storage
I have a problem with object creation shown on 20:07 timeline of video. Whenever a new image is uploaded a different object is created instead of incrementing the key of the existing object. Please help me with this problem.
Thankyou @PedroTech for this awesome video, it would be nice if you could make a video on how to make sub collections(nested collections) in firebase v9
i followed your guide and it work very well, except there is one thing. The image keeps being duplicated many time. Any fix for this. I have checked all the code in your video but no clue.
If you want upload personal image and download personal image you can use const imagesListRef = ref(storage, `images/${user.uid}`); or const imagesListRef = ref(storage, `images/${auth.currentUser.uid}`); but first you must do "Sıgn In" and "Sıgn Out" medhod in reactjs with firebase and useEffect(() => { if (user.uid) { const imagesListRef = ref(storage, `images/${user.uid}`); listAll(imagesListRef).then((response) => { response.items.forEach((item) => { getDownloadURL(item).then((url) => { setImageList((prev) => [...prev, url]); }); }); }); } else { return; } }, [user]); your useeffect must be like that becaouse when your page loading user accaount or auth progress not finished. Your useEffect must be relative to "user" or relative to "auth"
I'm so happy I came across your channel. I've been searching for videos on various aspects of firebase. Thanks man. Don't know if you mind doing a video on how to link stripe payment gateway to firebase. I'm planning on creating a dummy e-commerce site for my portfolio, and would like to integrate a payment gateway. I tried to get tutorials how to do it, but they are quite confusing.
Still on the payment integration, I noticed most of the tutorials I saw on stripe integration all had to do about firebase cloud functions. Is that the only way to integrate stripe to a web app?
i HAve updated the rules section but after running the app it is showing warning of " Missing Permission " due to firestore , and every time i run the app , a dialog box appears showing this and i need to close that then i am able to access the app , if it keeps that wway then i think it will have problems in deploying the app
Hey guys, my useeffect that is used to get the image URLs seems to be firing multiple times, and im getting the error "React Hook useEffect has a missing dependency: 'imageListRef'. Either include it or remove the dependency array." Any fixes? thanks
After installing firebase uuid i am geting this error Compiled with problems:X ERROR in ./node_modules/firebase/dist/index.esm.js Module build failed (from ./node_modules/source-map-loader/dist/cjs.js): Error: ENOENT: no such file or directory, open 'E:\e-buddy-for-rescued-child-labour\ebuddy-portal ode_modules\firebase\dist\index.esm.js' please suggest some solution.
QUESTION: Can I save an image file directly to firebase using an URL? Or do I need to download it to localStorage first and then back up? I am making app using Dalle2 images which generates image URLs which only last a few hours. Thanks!
Hey Pedro i had a question that i understand how to add image in firebase storage but will you please tell that how to reference a particular image to a particular document of firestore dynamically ?
when I console.log(response) I am getting 2 times for the same array. That causes the problem of displaying every image 2 times on the screen. Any idea how can I fix this ?
@@utkumattaktas7994 react strictmode is to check for impure functions. This one is a bit of an edge case, because the function fires twice before the fetch happens. if you want to keep strictmode, search "Async Function Adding Elements Twice to an Array in React" on stackoverflow. (youtube wont let me post the link)
Hi I have an issue regarding the listAll() method. When ever I use that method it re-renders all the codes multiple times, as a result it saves a duplicate of each downloadUrl.
I tried going through both the docs and your video but for some reason i can't display the images from the results of the download link function...though when i paste the url i get from the download link function the image downloads ...so i am not sure whats happening..
When I ran it, it just kept feeding more images like the state was stuck in a loop. Luckily not uploading extra images, just presenting extra. Like infinite list level extra.
Just adding extra timestamps for me in the future:
1:40 Firestore & project setup
4:10 Neccesary packages
5:00 Storage - get started
6:30 Firebase configuration
Working in the React app
8:30 Adding file input and btns
11:23 Uploading an image(firebase code)
13:25 Randomize image name
14:50 Upload the image to firebase
16:48 How storage works
17:20 Display all images in the React app
23:25 Show new uploaded images automatically
Thanks brother JAZAKALLAH
This was so much easier to understand than the official documentation. Thank you
Ain't dat the truth
Dude, really appreciate the approach. You are a clear-spoken and intelligent individual. Keep it up!
This is the best video on the very basics. A part 2 with a orderBy and delete option would be OP AF.
Pedro tech I followed all your firebase tutorial they r all BANGERS I LOVE YOU
I haven’t even watched the video but I’m so excited! My favourite tech TH-cam just released the tutorial I’ve been waiting for 🙌🏻
you are amazing , clear and concise , i have not seen other tutorial that focuses just on the logic and not building unnecessary frontend stuffs . i can always keep my code original and make extension to more ideas . In short , your way of teaching is pure and phenonmenol.
I used cloudinary on my First project and it was little tedious ,and I was so frustrated to do it again on my second project , And thanks to U I finished my img upload functionality on my second project with no hassles , THAANKS bro
thanks for the short clear video ,nice ,straight to the point no coners
Wow, really nailed the ball with this one, just about to start a project with image file uploading to Firebase. Thanks mate
Awesome to hear!
This is the video which one need now my situation. Thanks bruh by the way I am new subscriber of you channel.
Thanks for the sub!
This is perfect. I was just about to add image uploading functionality to my project. Thanks Pedro!
Glad it was helpful!
@@PedroTechnologies it didnt work
thank you very much for this simple project which helps to easily understand the basic concepts behind the upload process to firebase, I've just recently watched a video to do with this subject, it was simply a nightmare comparing to this one, it was like running without learning to walk :), huge thanks again
If anyone needs here is the useEffect code that wont add extra images on refresh :
useEffect(() => {
const fetchImages = async () => {
let result = await listAll(imageListRef);
let urlPromises = result.items.map((imageRef) => getDownloadURL(imageRef));
return Promise.all(urlPromises);
};
const loadImages = async () => {
const urls = await fetchImages();
setImageList(urls);
};
loadImages();
}, []);
Thanks Pedro, of course i will leave the like, its the least i can do for this great content.
Thanks again from Brazil!
You’re a life saver, you can’t imagine how happy I am😂
Thank you Pedro. Been looking for a video like this for a while now.
Thanks Pedro, great video! I have just explored you, I will continue following your videos.
i really love watching your LEGENDARY videos with awsome explainaton
Hey Pedro, I love watching your tutorials. They are easy to follow and explained quite well.
I just had another request, like can you please also make videos on some popular NPM libraries and how to use them in our codebase. That would really be helpful for a lot of people like me who rely on NPM libraries on a daily basis but can't find enough tutorials to fully understand their usage.
Thank you so so much for this! You manage to make things super clear and easy to understand and it's just great. Thanks again :)
This is very useful thank you.
But how would you upload images for specific items? Let's say that you want to allow users to upload products to the app, product should have a name, price, size and Image. So you create the form and connect it to Firebase database and uploads work fine for strings but with files (images) it's different. So how to connect the storage with code and with specific items in firebase?
I would like this too Hey Pedro would you spare time to make this video i would be very greatful
The key is to use storage just as that - storage, so you upload image to firebase storage and then use the URL and put it in your actual database. Lets say you have Postgresql database and in your app you have a feature to share Posts, so you have Post table in your database, in that table you store values like: id, postName, postCreatedAt... and you also can add postImage and in postImage you store the link to an image stored in firebase storage
hi guy! Thank u so much. This is so much easier to understand than the official docs.
I have a problem with object creation shown on 20:07 timeline of video. Whenever a new image is uploaded a different object is created instead of incrementing the key of the existing object. Please help me with this problem.
This was really well explained, its clear to see you got a passion! Keep going at it man, its truely great!
this is the video I've been looking for, just simple, easy to understand, thank you
Thanks!
Thank you so much for the support :)
this is the best video on the planet! why use drive api when you can do the same but in the easiest way possible🤩
Thanks so much a very good description. I was mixing up everything but your explanation was very fruitful
Straight to the point, thanks Padro!
You are my role model, thank you for this tutorial Pedro ;)
Upload image - 15:33
Retrieve image - 21:35
I really loved your video!! Thank you for uploading this, it really helped me.
Thankyou @PedroTech for this awesome video, it would be nice if you could make a video on how to make sub collections(nested collections) in firebase v9
Awesome explanation 👏 👌 👍
Nice one bro. Caps in the air
Great video, thanks! I had the pdf file getting doubled up in the loop. Removed Strict mode in index.js, that fixed it.
Fantastic video and explaination of how to interact with firebase while using React. Thank you :)
i followed your guide and it work very well, except there is one thing. The image keeps being duplicated many time. Any fix for this. I have checked all the code in your video but no clue.
If you want upload personal image and download personal image you can use
const imagesListRef = ref(storage, `images/${user.uid}`);
or
const imagesListRef = ref(storage, `images/${auth.currentUser.uid}`);
but first you must do "Sıgn In" and "Sıgn Out" medhod in reactjs with firebase
and
useEffect(() => {
if (user.uid) {
const imagesListRef = ref(storage, `images/${user.uid}`);
listAll(imagesListRef).then((response) => {
response.items.forEach((item) => {
getDownloadURL(item).then((url) => {
setImageList((prev) => [...prev, url]);
});
});
});
} else {
return;
}
}, [user]);
your useeffect must be like that becaouse when your page loading user accaount or auth progress not finished. Your useEffect must be relative to "user" or relative to "auth"
Exactly what i was looking for. Great explanation. Thank you
非常に分かりやすく、学習の助けになりました。ありがとうございます。
Hello Pedro , I say that file upload but " many file inputs " in reactjs with using storage and save url firestore .
Thanks for this PedroTech. This is subarashi.
Thanks i was looking for how to upload files to firebase. i think u should change your vs code theme 🙂
Happy to hear hahaha I still am using the same one because I started making a course using it so im only going change it when I am done with my course
Great brother❤️❤️ keep it up. I am your new subscriber❤️
this was awesome thanks for making this. keep making this helpful content 👌👍🙏
Very good tutorial, you give the pieces to create a cool personal project. Thanks!
I'm so happy I came across your channel. I've been searching for videos on various aspects of firebase. Thanks man. Don't know if you mind doing a video on how to link stripe payment gateway to firebase. I'm planning on creating a dummy e-commerce site for my portfolio, and would like to integrate a payment gateway. I tried to get tutorials how to do it, but they are quite confusing.
Still on the payment integration, I noticed most of the tutorials I saw on stripe integration all had to do about firebase cloud functions. Is that the only way to integrate stripe to a web app?
i HAve updated the rules section but after running the app it is showing warning of " Missing Permission " due to firestore , and every time i run the app , a dialog box appears showing this and i need to close that then i am able to access the app , if it keeps that wway then i think it will have problems in deploying the app
u can also put imageList as dependency of useEffect so that the page refreshes as new files are uploaded right?
Another awesome video. Really useful for my new project.
Could you please do a video on pagination using firestore?
yo yo all i have to say is I love you and thank you for this!!!!!!!
Thank you very much man, your videos are the best in the youtube
your are by far the best on TH-cam. Just have a question. Is it possible to do this without using firebase?
what if i want to have a search bar for the user to search for a specific file and then display that file. how can i do that
Thanks
PEDRO TO 100K LETS GO
AND THEN 1M LEEEETS GOOOOOOO
ALMOST THERE!!!!!!!!!!!!!
@@PedroTechnologies
Thanks for this wonderful tutorial. Very clean
sir g zindabad.. wada wada laav u hogya e qasmay
This helped me a lot. Thank you very much!
Thanks a lot. Very clear and easy to understand.
amzing explanation and perfectly structured steps.
Hey guys, my useeffect that is used to get the image URLs seems to be firing multiple times, and im getting the error "React Hook useEffect has a missing dependency: 'imageListRef'. Either include it or remove the dependency array."
Any fixes? thanks
This seems like an eslint error! Try either disabling it or adding the single line disable
This is amazingly perfect!
Please Will you make a video on how to send data and files to firebase from one js file.
Hello Pedro thanks for the video, What if I want to upload multiple images at ones ?
Thanks Man. I appreciate your videos
i implemented this on next js it work thanks alot dear
Thankyou so much brother. It helped me a lot.
After installing firebase uuid i am geting this error
Compiled with problems:X
ERROR in ./node_modules/firebase/dist/index.esm.js
Module build failed (from ./node_modules/source-map-loader/dist/cjs.js):
Error: ENOENT: no such file or directory, open 'E:\e-buddy-for-rescued-child-labour\ebuddy-portal
ode_modules\firebase\dist\index.esm.js'
please suggest some solution.
Bro you just gave me a new idea about my new API project......
This is really awesome, it would be wonderful if you can demo how firebase push notification work 🥰
Thank you for the video. Btw, can anyone tell me how to link some data to that particular upload (like name, date uploaded, etc) please.
QUESTION: Can I save an image file directly to firebase using an URL? Or do I need to download it to localStorage first and then back up? I am making app using Dalle2 images which generates image URLs which only last a few hours. Thanks!
clear and easy to understand, thanks
Thank you so much Mr. Pedro.
will there be a tutorial with using react, node, express and mysql? would appreciate it
Lovely demonstration
Hey Pedro i had a question that i understand how to add image in firebase storage but will you please tell that how to reference a particular image to a particular document of firestore dynamically ?
Thankss for explantion. So clear!!
Thank you! Would like to know if you can include sending an excel file to the backend (fire base or any) and validate its extension and size
Super class bro 🔥
fabulous job man
Google should learn from you regarding How to do the documentation.. Make it simple please, Google, like PedroTech!:)
Hey thanks for the great videos!! I was wondering if you could show how to store the link to the image in a firestore database
Nice one. Great content.
when I console.log(response) I am getting 2 times for the same array. That causes the problem of displaying every image 2 times on the screen. Any idea how can I fix this ?
Same, any help?
@@raydelara7185 i contacted with firebase support they have no idea.
the problem is React.StrictMode which causes useEffect to be fired twice in development mode
remove from index.js and it works as intended
@@christofstanits that worked thank you . Do you know that I am not using React.StrictMode will cause any problem later ?
@@utkumattaktas7994 react strictmode is to check for impure functions. This one is a bit of an edge case, because the function fires twice before the fetch happens.
if you want to keep strictmode, search "Async Function Adding Elements Twice to an Array in React" on stackoverflow.
(youtube wont let me post the link)
Hi I have an issue regarding the listAll() method. When ever I use that method it re-renders all the codes multiple times, as a result it saves a duplicate of each downloadUrl.
did you get the solution? i am having same problem
Same here
Thanks bro! God bless you.
Please make a video about Firebase security!!!!!!!! Please
Great Stuff, what if only want to show the image I just upload and use it as profile picture. I will be glad if you give me an answer to that
Thanks.. Can i do the same thing with async await?
감사합니다 덕분에 기능 구현했습니다.
nextjs 를 사용하고 있는데, 리액트에서는 에러가 안나는데 nextjs에서는
is not a function .. 이런 에러가 나서 찾아보니,
firebase 9.4.0 으로 설치하니 완벽히 해결되었습니다.
Great!! Regards from Brasil :)
Hey Pedro, would you consider making a video on caching firestore data so we make less api calls? & use firestore & identity platform from gcp?
Redis in this case?
thanks, I understand, and its works !
I tried going through both the docs and your video but for some reason i can't display the images from the results of the download link function...though when i paste the url i get from the download link function the image downloads ...so i am not sure whats happening..
a very helpful video. Thank you
Hello Pedro. How can i do to list all if I have several folders in my firebase storage, each with several pictures?
hi @pedrotech , great turorial!
the images a still in double even if i refresh the page. how can i fix this?
When I ran it, it just kept feeding more images like the state was stuck in a loop. Luckily not uploading extra images, just presenting extra. Like infinite list level extra.
any fix for this? same here