Upload Images / Files to Firebase In React - Firebase V9 File Upload Tutorial
HTML-код
- Опубликовано: 28 сен 2024
- 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/mac...
Join our Discord: / discord
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/l...
🐙 GraphQL Course: codedamn.com/l...
► Buy Crypto on Coinbase: coinbase-consumer.sjv.io/PedroTech
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/mac...
Business Email: pedro@pedrotech.co
Tags:
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial
#reactjs #firebase
![[Limbus Company - Teaser] Season5 - Oblivion](http://i.ytimg.com/vi/8anKuEeZLeI/mqdefault.jpg)
This was so much easier to understand than the official documentation. Thank you
Ain't dat the truth
This is the best video on the very basics. A part 2 with a orderBy and delete option would be OP AF.
Dude, really appreciate the approach. You are a clear-spoken and intelligent individual. Keep it up!
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 perfect. I was just about to add image uploading functionality to my project. Thanks Pedro!
Glad it was helpful!
@@PedroTechnologies it didnt work
Pedro tech I followed all your firebase tutorial they r all BANGERS I LOVE YOU
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!
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.
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 :)
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
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
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
Thank you Pedro. Been looking for a video like this for a while now.
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
This was really well explained, its clear to see you got a passion! Keep going at it man, its truely great!
Thanks Pedro, of course i will leave the like, its the least i can do for this great content.
Thanks again from Brazil!
Straight to the point, thanks Padro!
I really loved your video!! Thank you for uploading this, it really helped me.
this is the best video on the planet! why use drive api when you can do the same but in the easiest way possible🤩
i really love watching your LEGENDARY videos with awsome explainaton
Please make a video about Firebase security!!!!!!!! Please
this was awesome thanks for making this. keep making this helpful content 👌👍🙏
You are my role model, thank you for this tutorial Pedro ;)
sir g zindabad.. wada wada laav u hogya e qasmay
Exactly what i was looking for. Great explanation. Thank you
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?
Another awesome video. Really useful for my new project.
Could you please do a video on pagination using firestore?
will there be a tutorial with using react, node, express and mysql? would appreciate it
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 for this wonderful tutorial. Very clean
Please Will you make a video on how to send data and files to firebase from one js file.
i implemented this on next js it work thanks alot dear
PEDRO TO 100K LETS GO
AND THEN 1M LEEEETS GOOOOOOO
ALMOST THERE!!!!!!!!!!!!!
@@PedroTechnologies
worth watching it
This is really awesome, it would be wonderful if you can demo how firebase push notification work 🥰
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 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
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 ?
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 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... ?
No its not safe, I delete the projects after the vids
bro u need to do a delete image from firebase storage and user id, pls for your next content in follow up to this one
Thanks Man. I appreciate your videos
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();
}, []);
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
a very helpful video. Thank you
Thank you for the great tutorial bro.. can you please make a video for firebase function. Most especially a function that can run on it's own at a given time just like cron-job
hey I want to store two images so how can i achieve that ?
followed same steps and didnt work , but just to let you know i m trying to upload videos however i could upload it but when i try display it something goes wrong
Hello, great video and I managed to do it! But how do I only list the recent added image?
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"
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?
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?
Hi is it possible to upload an image along with some text for the image and show it.
hey thanks for the video but I have an issue. Every time I map through the imagelist, it renders the images continuously and doesnt stop. help please
great video! ty!
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!
Parabéns man!
Video muito bom!
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
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
THUMBS UP!
How about if I just want one item?
I find the documentation really hard to follow.
Would you be able to provide a cheatsheet or an easier guide to folllow ?
What should you do if the file path says "C:\fakepath\Image-to-upload.png"?
you are aweome!
thnks bro . realy helpful
its not working with pdfs. any idea why?
Thanks, man! :)
how to store image and text simultaneously
Can you show me how to handle error for that?
I get Unkown error While trying to download images
But it would really be nice if you added the feature of how to delete
Thanks!
you rock!
thank you
LEGEND
Hi Pedro, Is it safe to expose firebase config in frontend?
thanks 👍
Thanks
thank you
How about txt file...
it didnt work for typescript
Upload image - 15:33
Retrieve image - 21:35
I want to delete image how I an do it in react
Can*
Niceeeee!
I got an CORB errors when I tried to put the URL inside the img tag HELP HAHA
nice!
i have this error: Cannot POST
thums up
"snaphsot" 😄
anyone else unable to solve CORS issues here?
You are stroing all your api information directly in your client code.thats not very safe.
How else can I store it?
@@edosegheosamagbe9077 i actaully dont know. how ?
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
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
I don't know why but it is looping and it is just rendering image atleast 20 to 40 times
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)
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
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.
Hello Pedro , I say that file upload but " many file inputs " in reactjs with using storage and save url firestore .
This isn't complicated as you said in your firebase tutorial 😂😂