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

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

[@eleazarhernandez805]

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

[@Human_Evolution-]

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

[@itsrubydoyle]

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

[@purple88able]

Thanks!

[@PedroTechnologies]

Thank you so much for the support :)

[@ethenGold]

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

[@alexandrewilk2000]

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

[@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

[@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!

[@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

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

[@QuayneBrown]

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

[@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!

[@victorross5524]

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

[@Andreas-hy7ob]

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

[@ibrokhimkhayitmirzaev6713]

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

[@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

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

[@victortimi]

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

[@marcelomalagra1613]

Straight to the point, thanks Padro!

[@mericakgul]

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

[@nemanja3394]

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?

[@mega9686]

I would like this too Hey Pedro would you spare time to make this video i would be very greatful

[@Ja-rz9fq]

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

[@casiotoiuuofficial6245]

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

[@keiferramos8858]

Thanks for this PedroTech. This is subarashi.

[@wojteknowak8946]

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

[@suryasuthar9427]

Hello Pedro , I say that file upload but " many file inputs " in reactjs with using storage and save url firestore .

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

[@md.nayeemhasanadil5938]

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

[@codewithdevhindi9937]

i really love watching your LEGENDARY videos with awsome explainaton

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

[@fearquare]

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

[@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

[@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

[@hiich1584]

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

[@TC-gv9fs]

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

[@thatosrsdude4831]

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

[@TheOhmagad]

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

[@hammudi6790]

will there be a tutorial with using react, node, express and mysql? would appreciate it

[@teminoah2960]

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

[@NezNez]

Thanks for the video! Is it safe to store all your api keys on frontend code like that? So basically anyone could upload some terabytes to your bucket and you get billed for that... ?

[@PedroTechnologies]

No its not safe, I delete the projects after the vids

[@prashantindurkar]

Thanks i was looking for how to upload files to firebase. i think u should change your vs code theme 🙂

[@PedroTechnologies]

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

[@talalkhan1873]

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

[@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🤩

[@muhammadmohsinhussain5428]

Thanks.. Can i do the same thing with async await?

[@PawelMisiura]

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(); }, []);

[@JitenderMediaX]

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

[@joza5422]

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

[@utkumattaktas7994]

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 ?

[@raydelara7185]

Same, any help?

[@utkumattaktas7994]

@@raydelara7185 i contacted with firebase support they have no idea.

[@christofstanits]

the problem is React.StrictMode which causes useEffect to be fired twice in development mode remove from index.js and it works as intended

[@utkumattaktas7994]

@@christofstanits that worked thank you . Do you know that I am not using React.StrictMode will cause any problem later ?

[@christofstanits]

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

[@charbelmansour8925]

PEDRO TO 100K LETS GO

[@charbelmansour8925]

AND THEN 1M LEEEETS GOOOOOOO

[@PedroTechnologies]

ALMOST THERE!!!!!!!!!!!!!

[@charbelmansour8925]

@@PedroTechnologies

[@andersbraathen1256]

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

[@monirhossainrabby7259]

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

[@zusm]

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

[@PedroTechnologies]

This seems like an eslint error! Try either disabling it or adding the single line disable

[@angelecg]

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

[@Trchise]

hi @pedrotech , great turorial! the images a still in double even if i refresh the page. how can i fix this?

[@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

[@tashinamgay7922]

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.

[@RockstarGamer4531]

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 ?

[@rudra5050]

Please Will you make a video on how to send data and files to firebase from one js file.

[@gotjuked8682]

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.

[@divyapawar6269]

did you get the solution? i am having same problem

[@spacepirate2468]

Same here

[@michelsegnon]

Thanks for this wonderful tutorial. Very clean

[@Joseph-do9ue]

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

[@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

[@muzardemoses]

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

[@felicia499]

Thanks a lot. Very clear and easy to understand.

[@human_justice]

Hey thanks for the tutorial. I am working on a blog and I want to display only the images I uploaded for the blogpost. Any Idea?

[@abeechr]

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!

[@kartikyadav571]

fabulous job man

[@anandhukraju8044]

Hey Pedro, would you consider making a video on caching firestore data so we make less api calls? & use firestore & identity platform from gcp?

[@ramonpaolomaran2253]

Redis in this case?

[@HI-ks4pr]

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

[@mihaimc99]

This helped me a lot. Thank you very much!

[@dreamArmy34]

hey I want to store two images so how can i achieve that ?

[@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?

[@latentrealms]

Hello Pedro. How can i do to list all if I have several folders in my firebase storage, each with several pictures?

[@xMarcakizen]

Hello, great video and I managed to do it! But how do I only list the recent added image?

[@Llytkm]

Hi is it possible to upload an image along with some text for the image and show it.

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

[@shamseerpv9488]

Super class bro 🔥

[@rebazjabar7660]

i implemented this on next js it work thanks alot dear

[@joemartens7864]

Hi Pedro, I'm trying to get the image URL as soon as I upload it, do you know can I manage to get it? Thanks in advance!

[@nidhishettigar6981]

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.

[@MrBrycenG]

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.

[@Beh3D]

any fix for this? same here

[@rameshsrivastavachandra]

This is amazingly perfect!

[@mmmmm-j2s]

Thank u for ur video! But it keeps showing me the same images twice and refreshing the page doesn't work. I copied and pasted ur code. How can i solve this problem?

[@vinbro751]

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

[@wisdomelue]

please what if you want to update a user profile, i want to get the url of the image the user added as a profile picture how do i get the url for that single image without using Listll

[@fionagonza8829]

Thank you so much Mr. Pedro.

[@georgeolufemi4285]

Nice one. Great content.

[@Buddhism1123]

Lovely demonstration

[@RyanBlair-xh2sy]

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

[@findmyreligion]

Thankyou so much brother. It helped me a lot.

[@supercoolcat7692]

Thanks Man. I appreciate your videos

[@travahnetshisaulu3101]

clear and easy to understand, thanks

[@filipevalentegomes2383]

I watched your video on CRUD with Firebase. Let's say I have a bunch of users stored in the firebase database, what would I have to do to let them upload an image that is linked under their info on the database where their info is stored. Im asking cuz this shows how to upload on firebase storage, but not how to link it to a firebase database. Hope my question makes sense to you

[@johnsondsouza4722]

Could you teach us how to do this but in nextjs it's quite confusing with the new version of firebase and nextjs....

[@poorna_recharla]

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

[@elveyo9106]

hello Pedro. I made similar app. I used firebase storage for storing and deleting images. How can I deploy my app?

[@jithinp8441]

Which extention is that terminal auto complete

[@PedroTechnologies]

Gh copilot

[@jithinp8441]

@@PedroTechnologies thankyou

[@anhtungle1554]

amzing explanation and perfectly structured steps.