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

Подписаться 209 тыс.

Просмотров 153 тыс.

50% 1

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

Наука

Опубликовано:

4 апр 2022

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 231

@pablom8854 7 месяцев назад

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 4 месяца назад

Thanks brother JAZAKALLAH

@Lorkisen Год назад

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

@rameshsrivastavachandra Год назад

Ain't dat the truth

@victorvondoom2350 2 года назад

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 2 года назад

I haven’t even watched the video but I’m so excited! My favourite tech RU-vid just released the tutorial I’ve been waiting for 🙌🏻

@alessiapiscopo 2 года назад

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 2 года назад

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

@eleazarhernandez805 5 месяцев назад

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

@VickTechPro 2 года назад

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 10 месяцев назад

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

@ethenGold 2 года назад

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

@mericakgul 2 года назад

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

@marcelomalagra1613 2 года назад

Straight to the point, thanks Padro!

@alexandrewilk2000 2 года назад

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 11 месяцев назад

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 2 года назад

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

@fearquare 3 месяца назад

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

@thatosrsdude4831 2 года назад

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

@ngonimugumwa6374 2 года назад

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

@PedroTechnologies 2 года назад

Awesome to hear!

@HI-ks4pr 2 года назад

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

@wojteknowak8946 Год назад

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

@joshuaborseth 2 года назад

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

@PedroTechnologies 2 года назад

Glad it was helpful!

@dvlnx. 2 года назад

@@PedroTechnologies it didnt work

@michelsegnon Год назад

Thanks for this wonderful tutorial. Very clean

@codewithdevhindi9937 Год назад

i really love watching your LEGENDARY videos with awsome explainaton

@casiotoiuuofficial6245 7 месяцев назад

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

@Joseph-do9ue 2 года назад

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

@felicia499 10 месяцев назад

Thanks a lot. Very clear and easy to understand.

@mihaimc99 11 месяцев назад

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😂

@JitenderMediaX 2 часа назад

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

@monirhossainrabby7259 2 года назад

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 2 года назад

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

@anhtungle1554 2 года назад

amzing explanation and perfectly structured steps.

@aswinkashok6213 2 года назад

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

@findmyreligion Год назад

Thankyou so much brother. It helped me a lot.

@georgeolufemi4285 2 года назад

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 7 месяцев назад

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

@shamseerpv9488 2 года назад

Super class bro 🔥

@13hpca Год назад

Parabéns man! Video muito bom!

@ashikmahmud4076 2 года назад

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

@PedroTechnologies 2 года назад

Thanks for the sub!

@fionagonza8829 Год назад

Thank you so much Mr. Pedro.

@joza5422 2 года назад

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

@BrunoOliveira-Bling 11 месяцев назад

great video! ty!

@mohamedhakim8336 6 месяцев назад

a very helpful video. Thank you

@xlgabriel 8 месяцев назад

Thanks bro! God bless you.

@lipocodes2273 Год назад

Excellent tutorial

@poorna_recharla 2 года назад

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 2 года назад

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 3 месяца назад

Thanks a lot!

@Glopzu 2 месяца назад

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 2 года назад

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 2 года назад

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 5 месяцев назад

Thank you so much

@Amey-sn3eb 2 года назад

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 9 месяцев назад

this video is very helpfull for me

@hiich1584 2 года назад

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

@serdarinjo 2 года назад

Thanks a lot bro :) !

@pro4erb 2 года назад

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 RU-vid. Just have a question. Is it possible to do this without using firebase?

@marcelomagalhaes6619 Год назад

Great!! Regards from Brasil :)

@jare3582 2 года назад

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

@mohammed_basher Год назад

you rock!

@kevyyar 2 года назад

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

@fictionlist4997 Год назад

U BEST!!!

@TC-gv9fs 2 года назад

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

@nguyenhuynhtrung8254 2 года назад

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 2 года назад

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

@aymenbachiri-yh2hd 7 месяцев назад

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 2 года назад

thanks 👍

@turki8542 2 года назад

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 2 года назад

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