DEV Community

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

Collapse
 
tallangroberg profile image
Tallan Groberg

I’m sorry for the late response.

The best way I have used this in forms is to have the image upload input outside the form that contains the text
inputs

Then save the imageAsUrl to an object with The text inputs.

So it would look something like this.

Usestate({title: “”, description: “”, imgUrl: “some return from firebase”})

The title and description get saved on a separate form as the img url

I hope that helps and I’m sorry I was so late on the response.

Collapse
 
alaomichael profile image
Michael Alao

Thank you so much for the reply.
Please how do I restrict user to view only their data in a React ,Redux application? Thank you.

Thread Thread
 
tallangroberg profile image
Tallan Groberg

You will have to make a user auth, I have a tutorial on how to do so with firebase if you want to continue learning more about this kind of stuff.

I don’t know how to do so with redux but it should be fairly similar to react context.

User auth can be very tricky and I would suggest going through my firebase tutorial because that is the easiest way I know how to give users identity on my apps

Thread Thread
 
alaomichael profile image
Michael Alao

Please can you send me the link to your tutorial? Thank you.

Thread Thread
 
tallangroberg profile image
Tallan Groberg

Sure,

Let me know if this works for you!!

Good luck

dev.to/itnext/user-auth-with-fireb...

Collapse
 
lydiacha profile image
Lydia Chatziioannou • Edited

Hi Tallan, I'm a complete beginner and I'm afraid I'm not sure what you mean by this comment. I also want to use the uploadImage within a form where I have other text input fields. Is it possible for you to create another tutorial that does exactly that? And also how to display all the data from the form on a different page? My main is problem is... if I'm creating a post with a title, content and then an image how does the image know that it belongs to that specific post with that title and content if the title and content are saved in Firestore and the image is stored in storage? I would appreciate a tutorial on this, there's nothing else out there from what I've seen so far. Thanks!

Thread Thread
 
tallangroberg profile image
Tallan Groberg

Ok, I will see if I can make a part 2 to this tutorial so that it’s easier to see how image uploads fit into the bigger picture with other form data.

This tutorial was designed to be as simple as possible for doing an image upload, but I am seeing the need to show everyone how to use this in a way that you would naturally on a website.

Thanks for the feedback!!

Thread Thread
 
lydiacha profile image
Lydia Chatziioannou • Edited

Amazing, thank you!

Any chance you can create the tutorial this month? ☺️