In this lecture, we are going to allow the user to select a screenshot, currently I'm viewing the
upload form.
Three of the screenshots have a green border.
We're going into applying this green border to indicate the currently selected screenshot.
At the moment, they all have green borders.
We should apply a transparent border to unselected screenshots.
The first step is to store these selected screen after these screenshots have been generated in your
editor.
Open the upload component class file.
Next, create a property called selected screenshot with an initial value of an empty string.
These screenshots property is an array of strings during selection.
We're going to store a copy of the URL in the selected screenshot property by default.
We're going to set this property to an empty string since the array is empty when the array gets filled.
Let's update this property to the first item in the array.
Scroll to the store file function.
We are calling the Get Screenshots function to retrieve the array of screenshots we should update the
selected screenshot property after calling this function, update the property to the first item in
the array.
Our template needs to be updated next.
Try this as an exercise, I want you to change the color of the border surrounding the images.
I've already applied a border class on the image.
You need to convert it from a static class to a dynamic class.
As for the other images, their border should be transparent.
You can change the color of the borders with tailwind classes.
Customs access is not required.
Positive video and good luck.
Welcome back.
If you're able to dynamically apply the broader colors, that's great.
If not, let's walk through the solution together in your ED. Open the upload template file.
In this template, search for these screenshots loop.
On the div tag with the loop, we're applying the border classes to this element by default.
All screenshots will have the border green for Hunter Class.
Let's remove this class.
Next, bind the energy class directive to an object.
In this object, we're going to set the border green for class to the following condition.
Screenshot equals equals equals selected screenshot.
The class gets applied if the screenshot in the current iteration matches the selected screenshot by
the user.
Next, we're going to add a class called Border Transparent with the following condition.
Screenshot does not equal selected screenshot.
The condition is the opposite of the other condition.
We are checking if the screen shot values are not equal to each other.
There's one more step at the moment.
The same screenshot will always be selected.
Screenshots should be updated when they're clicked on on the image tag.
We're going to bind the click event.
In this event, we're going to update the selected screenshot property to the screenshot variable.
After making those changes, let's try testing our form by uploading a file.
By default, the first image is selected, which is what we want it.
We can click on any of the screenshots to change the thumbnail.
It's the behavior we were looking for.
We can start uploading our screenshot to Firebase.
Let's begin handling this action in the next lecture.