Adding UI Elements for Storage

User interface widgets

Our goal is to build a straightforward UI that will eventually work with our tree planting forum. We must consider how an image is downloaded and uploaded to Firebase Storage when developing this UI.

Here is a list of actions we need to take:

1. Select an image: The user can choose an image to upload from the local storage.

2. Preview image: We display the image in the UI so the user can confirm the selected image.

3. Upload image: The user uploads the photo to Firebase Storage after confirmation.

4. Display all images: Finally, we display all the images that are stored in Firebase Storage.

Add image page

We’ll start by creating a UI that provides “Select image,” “Download,” and “Submit” buttons to perform the corresponding actions by the user.