Upload Images / Files to Firebase In React - Firebase V9 File Upload Tutorial

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: [e-mail]
Tags:
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial
#reactjs #firebase

[@pablom8854]

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

[@basitgamingchannel8349]

Thanks brother JAZAKALLAH

[@Lorkisen]

This was so much easier to understand than the official documentation. Thank you

[@rameshsrivastavachandra]

Ain't dat the truth

[@victorvondoom2350]

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.

[@itsdazychain]

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 🙌🏻

[@alessiapiscopo]

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 :)

[@Andreas-hy7ob]

This was really well explained, its clear to see you got a passion! Keep going at it man, its truely great!

[@eleazarhernandez805]

Dude, really appreciate the approach. You are a clear-spoken and intelligent individual. Keep it up!

[@VickTechPro]

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.

[@ibrokhimkhayitmirzaev6713]

this is the video I've been looking for, just simple, easy to understand, thank you

[@Human_Evolution-]

This is the best video on the very basics. A part 2 with a orderBy and delete option would be OP AF.

[@QuayneBrown]

Thank you Pedro. Been looking for a video like this for a while now.

[@ethenGold]

thanks for the short clear video ,nice ,straight to the point no coners

[@mericakgul]

Thanks Pedro, great video! I have just explored you, I will continue following your videos.

[@marcelomalagra1613]

Straight to the point, thanks Padro!

[@alexandrewilk2000]

Pedro tech I followed all your firebase tutorial they r all BANGERS I LOVE YOU

[@victorross5524]

Thanks Pedro, of course i will leave the like, its the least i can do for this great content.
Thanks again from Brazil!

[@md.nayeemhasanadil5938]

Thanks so much a very good description. I was mixing up everything but your explanation was very fruitful

[@tahep3906]

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

[@TheOhmagad]

Exactly what i was looking for. Great explanation. Thank you

[@angelecg]

Very good tutorial, you give the pieces to create a cool personal project. Thanks!

[@fearquare]

I really loved your video!! Thank you for uploading this, it really helped me.

[@thatosrsdude4831]

Fantastic video and explaination of how to interact with firebase while using React. Thank you :)

[@ngonimugumwa6374]

Wow, really nailed the ball with this one, just about to start a project with image file uploading to Firebase. Thanks mate

[@PedroTechnologies]

Awesome to hear!

[@HI-ks4pr]

非常に分かりやすく、学習の助けになりました。ありがとうございます。

[@wojteknowak8946]

You are my role model, thank you for this tutorial Pedro ;)

[@joshuaborseth]

This is perfect. I was just about to add image uploading functionality to my project. Thanks Pedro!

[@PedroTechnologies]

Glad it was helpful!

[@dvlnx.]

@@PedroTechnologies it didnt work

[@michelsegnon]

Thanks for this wonderful tutorial. Very clean

[@codewithdevhindi9937]

i really love watching your LEGENDARY videos with awsome explainaton

[@casiotoiuuofficial6245]

hi guy! Thank u so much. This is so much easier to understand than the official docs.

[@JitenderMediaX]

this was awesome thanks for making this. keep making this helpful content 👌👍🙏

[@Joseph-do9ue]

Thank you very much man, your videos are the best in the youtube

[@felicia499]

Thanks a lot. Very clear and easy to understand.

[@mihaimc99]

This helped me a lot. Thank you very much!

[@teminoah2960]

Awesome explanation 👏 👌 👍
Nice one bro. Caps in the air

[@kartikyadav571]

fabulous job man

[@victortimi]

You’re a life saver, you can’t imagine how happy I am😂

[@monirhossainrabby7259]

Great brother❤️❤️ keep it up. I am your new subscriber❤️

[@andersbraathen1256]

Great video, thanks! I had the pdf file getting doubled up in the loop. Removed Strict mode in index.js, that fixed it.

[@travahnetshisaulu3101]

clear and easy to understand, thanks

[@anazi]

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.

[@bhavyakumar5799]

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

[@aswinkashok6213]

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

[@anhtungle1554]

amzing explanation and perfectly structured steps.

[@findmyreligion]

Thankyou so much brother. It helped me a lot.

[@georgeolufemi4285]

Nice one. Great content.

[@rebazjabar7660]

i implemented this on next js it work thanks alot dear

[@rameshsrivastavachandra]

This is amazingly perfect!

[@Buddhism1123]

Lovely demonstration

[@comcatcom8829]

Thankss for explantion. So clear!!

[@keiferramos8858]

Thanks for this PedroTech. This is subarashi.

[@supercoolcat7692]

Thanks Man. I appreciate your videos

[@talalkhan1873]

sir g zindabad.. wada wada laav u hogya e qasmay

[@shamseerpv9488]

Super class bro 🔥

[@13hpca]

Parabéns man!
Video muito bom!

[@ashikmahmud4076]

This is the video which one need now my situation. Thanks bruh by the way I am new subscriber of you channel.

[@PedroTechnologies]

Thanks for the sub!

[@fionagonza8829]

Thank you so much Mr. Pedro.

[@joza5422]

yo yo all i have to say is I love you and thank you for this!!!!!!!

[@BrunoOliveira-Bling]

great video! ty!

[@mohamedhakim8336]

a very helpful video. Thank you

[@xlgabriel]

Thanks bro! God bless you.

[@lipocodes2273]

Excellent tutorial

[@poorna_recharla]

Another awesome video. Really useful for my new project.
Could you please do a video on pagination using firestore?

[@aysommer]

Nice info, thanks

[@EliAsikaro]

Much appreciated Bro

[@albertoginelsalvador2172]

SO GOOD!!

[@daniishhhh]

thnks bro . realy helpful

[@MadroadFact]

worth watching it

[@maskman4821]

This is really awesome, it would be wonderful if you can demo how firebase push notification work 🥰

[@zecsba7627]

Thanks bro!! Thanks!

[@bogdanradoi1963]

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.

[@armorunit6970]

Thanks a lot!

[@Glopzu]

you are aweome!

[@brendandefaria4495]

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?

[@fosimuboolubo8891]

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.

[@fosimuboolubo8891]

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?

[@un_chien_andalou]

Thanks, man! :)

[@devonly9298]

Thank you!!!

[@gokulnaathb2627]

Thank you so much

[@Amey-sn3eb]

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.

[@aryaprima6626]

Thankyou pedro

[@gavit633]

this video is very helpfull for me

[@hiich1584]

u can also put imageList as dependency of useEffect so that the page refreshes as new files are uploaded right?

[@serdarinjo]

Thanks a lot bro :) !

[@pro4erb]

this is the best video on the planet! why use drive api when you can do the same but in the easiest way possible🤩

[@filip23128]

Thanks!

[@vinbro751]

your are by far the best on TH-cam. Just have a question. Is it possible to do this without using firebase?

[@marcelomagalhaes6619]

Great!! Regards from Brasil :)

[@jare3582]

for mapping the files, do we always use the "url" or is there another thing that we can use it to loop in
thanks for your content

[@kevyyar]

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

[@mohammed_basher]

you rock!

[@fictionlist4997]

U BEST!!!

[@TC-gv9fs]

Hello Pedro thanks for the video, What if I want to upload multiple images at ones ?

[@nguyenhuynhtrung8254]

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.

[@shinten1269]

Bro you just gave me a new idea about my new API project......

[@aymenbachiri-yh2hd]

Thank you

[@fantasticyuvi8104]

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

[@robertmacwan8144]

thanks 👍

[@turki8542]

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

[@mohamedeltaquee5236]

Thank bro

[@JoeOsborneMusic]

LEGEND

[@refentsengoakomakgoba2456]

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..