DEV Community

Discussion on: How to do image upload with firebase in react.

Collapse
francisrod01 profile image
Francis Rodrigues

Hi there, thanks for this tutorial.
Could you suggest the best practice to load a list of posts (with firebase images) in the background?

Collapse
tallangroberg profile image
Tallan Groberg Author

So there are a lot of ways you can do that. You could save the image string to a larger object and then set the background of the div in the style={ backGroundUrl: “imgUrl”}

I don’t know of a good resource for how to do this but if you got my tutorial working you got the hardest part of the process is complete.

Good luck

Collapse
francisrod01 profile image
Francis Rodrigues

Thanks for reaching out.
I'm more interested in the part of saving and fetching this data.
Which strategy do you use to do that better?

I'm not sure if it will be a good practice fetching the storage resource every time a user navigates back in a list of records with its storage url.

Thread Thread
tallangroberg profile image
Tallan Groberg Author • Edited on

I would suggest multer if you are familiar with node. I'm not sure of a relational database option but building a relational backend would be the very best practice, this article talks about the pros and cons.

You don't technically own your data with firebase unless you save it somewhere else after it's uploaded to firebase and so I personally suggest using multer unless you have some background in relational database building. With these options, you will have more of a say in what happens to the images than what I teach in this tutorial.

Also, It should be a faster API call.

Does that answer your question?

Thread Thread
francisrod01 profile image
Francis Rodrigues

Thanks for this interesting package. I'll have a better look at it later.
I was talking about something related to firestore.

You know that Firebase has the Storage service, right? gs://xxxxxx-app.appspot.com

Being more specific, so I've asked if you will upload a file on Firebase Storage service and save its file URL into Firestore or only the file name and loads it every time the user opens the page. That's my question.

Thread Thread
tallangroberg profile image
Tallan Groberg Author

I’m currently working on a tutorial about how to do what you just described. Since I know this tutorial is only good for one small piece of functionality. I’m hoping to release something that ties together using my stuff about firebase specifically.

There is a lot of really good material about firebase on dev.to and the broader web that might be able to get you further on your project.

Thread Thread
francisrod01 profile image
Francis Rodrigues

Great!! You can count on me getting beginners/intermediates levels of JavaScript programmers with Firebase questions and bringing it to you. I'm not the only one with such doubts, I can say.