From the course: React: Cloud-Powered Apps with Firebase

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Profile image upload form

Profile image upload form

From the course: React: Cloud-Powered Apps with Firebase

Start my 1-month free trial

Profile image upload form

- Now that we have set up cloud storage, along with the security rules, let's implement a new feature to allow the user to upload their profile photo. Let's create a new component and call it profileimage.js. Import react from react. This new component will take in the user ID as a prop. We can first create a div to hold the image. The profile image will be four columns wide, and let's give it a custom class here. Inside of this container, we will add the placeholder image. Source will be assets/profile-placeholder.png. And let's give it the alt attribute. Go ahead and open the resources folder. Open up 04-03 and grab this image to the public folder in your project. Below the image tag, we will add the file input, which will be hidden for now. And it will accept .png and .jpg files. Right below, we allot button that will simply trigger the click on the hidden input. The text will be upload photo, and…

Contents