Upload Images / Files to Firebase In React - Firebase V9 File Upload Tutorial
VloĆŸit
- Äas pĆidĂĄn 4. 04. 2022
- UPLOAD IMAGES IN REACT USING FIREBASE. In this video I will go over how to use Firebase storage to upload images in React!
Code: github.com/machadop1407/fireb...
Join our Discord: / discord
đ Learn ReactJS By Building 6 Projects: codedamn.com/learn/reactjs-pr...
đ GraphQL Course: codedamn.com/learn/graphql-fo...
âș Buy Crypto on Coinbase: coinbase-consumer.sjv.io/PedroTech
Social
âŹâŹâŹâŹâŹâŹâŹâŹâŹâŹâŹâŹâŹâŹâŹâŹâŹâŹâŹâŹâŹâŹâŹâŹâŹâŹ
Website: machadopedro.com
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/machadop1407
Business Email: pedro@pedrotech.co
Tags:
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial
#reactjs #firebase - VÄda a technologie
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
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 :)
I havenât even watched the video but Iâm so excited! My favourite tech CZcams 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.
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
Thank you Pedro. Been looking for a video like this for a while now.
Straight to the point, thanks Padro!
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
thanks for the short clear video ,nice ,straight to the point no coners
Thanks Pedro, great video! I have just explored you, I will continue following your videos.
This was so much easier to understand than the official documentation. Thank you
Ain't dat the truth
Exactly what i was looking for. Great explanation. Thank you
Thanks Pedro, of course i will leave the like, its the least i can do for this great content.
Thanks again from Brazil!
Thanks so much a very good description. I was mixing up everything but your explanation was very fruitful
I really loved your video!! Thank you for uploading this, it really helped me.
Very good tutorial, you give the pieces to create a cool personal project. Thanks!
Thanks for this wonderful tutorial. Very clean
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.
fabulous job man
i really love watching your LEGENDARY videos with awsome explainaton
This is amazingly perfect!
Fantastic video and explaination of how to interact with firebase while using React. Thank you :)
You are my role model, thank you for this tutorial Pedro ;)
Thank you very much man, your videos are the best in the youtube
This helped me a lot. Thank you very much!
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!
Parabéns man!
Video muito bom!
Thanks a lot. Very clear and easy to understand.
clear and easy to understand, thanks
éćžžă«ćăăăăăăćŠçżăźć©ăă«ăȘăăŸăăăăăăăšăăăăăŸăă
Thanks Man. I appreciate your videos
Thankyou so much brother. It helped me a lot.
Youâre a life saver, you canât imagine how happy I amđ
Lovely demonstration
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
hi guy! Thank u so much. This is so much easier to understand than the official docs.
Super class bro đ„
Thankss for explantion. So clear!!
amzing explanation and perfectly structured steps.
Nice one. Great content.
Awesome explanation đ đ đ
Nice one bro. Caps in the air
Great brotherâ€ïžâ€ïž keep it up. I am your new subscriberâ€ïž
yo yo all i have to say is I love you and thank you for this!!!!!!!
i implemented this on next js it work thanks alot dear
Much appreciated Bro
Thank you so much Mr. Pedro.
Thanks bro! God bless you.
Excellent tutorial
a very helpful video. Thank you
Thank you man đđ I got stuck for like two days on tutorial that have firebase 8 not firebase9 so I could not proceed. Thanks again.
great video! ty!
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
thnks bro . realy helpful
Nice info, thanks
SO GOOD!!
sir g zindabad.. wada wada laav u hogya e qasmay
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!
Great video, thanks! I had the pdf file getting doubled up in the loop. Removed Strict mode in index.js, that fixed it.
Thanks for this PedroTech. This is subarashi.
Thanks bro!! Thanks!
worth watching it
this video is very helpfull for me
Thanks, man! :)
Thankyou pedro
Thanks a lot!
Thank you so much
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
Another awesome video. Really useful for my new project.
Could you please do a video on pagination using firestore?
you are aweome!
Great!! Regards from Brasil :)
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?
Thank you!!!
Thanks a lot bro :) !
This is really awesome, it would be wonderful if you can demo how firebase push notification work đ„°
U BEST!!!
Thanks!
you rock!
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
Thank you
thanks đ
Thank bro
Thank you, this was so helpful! Just a quick question, would it be best to place this code inside a context provider or just have it as a function in a file somewhere on my app?
u can also put imageList as dependency of useEffect so that the page refreshes as new files are uploaded right?
LEGEND
Great video ! Helped a lot. You will be famous one day if you continue the tutorial path.
Do you plan on making a tutorial to upload files without using Firebase ? I have a FTP server and would like to use that instead of Firebase.
me fue de mucha ayuda tu vĂdeo, pero de que manera puedo mostrar las imĂĄgenes que suban a un carrusel y de que manera puedo usar un custom hook que haga las imĂĄgenes que se muestren sea re utilizable para mostrarlas en otros lados?
Bro you just gave me a new idea about my new API project......
thank you
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 ?
Hello Pedro thanks for the video, What if I want to upload multiple images at ones ?
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
Thanks.. Can i do the same thing with async await?
your are by far the best on CZcams. Just have a question. Is it possible to do this without using firebase?
this is the best video on the planet! why use drive api when you can do the same but in the easiest way possibleđ€©
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.
Thanks