1
00:00:00,210 --> 00:00:06,360
In this lecture, we are going to allow the user to select a screenshot, currently I'm viewing the

2
00:00:06,360 --> 00:00:07,260
upload form.

3
00:00:07,560 --> 00:00:10,320
Three of the screenshots have a green border.

4
00:00:10,590 --> 00:00:15,750
We're going into applying this green border to indicate the currently selected screenshot.

5
00:00:16,050 --> 00:00:18,540
At the moment, they all have green borders.

6
00:00:18,810 --> 00:00:23,220
We should apply a transparent border to unselected screenshots.

7
00:00:23,790 --> 00:00:29,850
The first step is to store these selected screen after these screenshots have been generated in your

8
00:00:29,850 --> 00:00:30,420
editor.

9
00:00:30,570 --> 00:00:33,270
Open the upload component class file.

10
00:00:35,720 --> 00:00:42,200
Next, create a property called selected screenshot with an initial value of an empty string.

11
00:00:44,890 --> 00:00:49,570
These screenshots property is an array of strings during selection.

12
00:00:49,680 --> 00:00:56,170
We're going to store a copy of the URL in the selected screenshot property by default.

13
00:00:56,350 --> 00:01:02,890
We're going to set this property to an empty string since the array is empty when the array gets filled.

14
00:01:03,040 --> 00:01:06,670
Let's update this property to the first item in the array.

15
00:01:07,000 --> 00:01:09,430
Scroll to the store file function.

16
00:01:11,940 --> 00:01:18,660
We are calling the Get Screenshots function to retrieve the array of screenshots we should update the

17
00:01:18,660 --> 00:01:25,380
selected screenshot property after calling this function, update the property to the first item in

18
00:01:25,380 --> 00:01:25,950
the array.

19
00:01:28,720 --> 00:01:31,270
Our template needs to be updated next.

20
00:01:31,600 --> 00:01:37,690
Try this as an exercise, I want you to change the color of the border surrounding the images.

21
00:01:38,050 --> 00:01:40,960
I've already applied a border class on the image.

22
00:01:41,230 --> 00:01:45,610
You need to convert it from a static class to a dynamic class.

23
00:01:45,940 --> 00:01:50,020
As for the other images, their border should be transparent.

24
00:01:50,290 --> 00:01:54,070
You can change the color of the borders with tailwind classes.

25
00:01:54,430 --> 00:01:56,800
Customs access is not required.

26
00:01:57,070 --> 00:01:59,140
Positive video and good luck.

27
00:02:01,400 --> 00:02:02,240
Welcome back.

28
00:02:02,480 --> 00:02:06,650
If you're able to dynamically apply the broader colors, that's great.

29
00:02:06,950 --> 00:02:13,640
If not, let's walk through the solution together in your ED. Open the upload template file.

30
00:02:16,030 --> 00:02:19,330
In this template, search for these screenshots loop.

31
00:02:21,860 --> 00:02:27,890
On the div tag with the loop, we're applying the border classes to this element by default.

32
00:02:28,130 --> 00:02:32,090
All screenshots will have the border green for Hunter Class.

33
00:02:32,360 --> 00:02:33,950
Let's remove this class.

34
00:02:36,420 --> 00:02:40,590
Next, bind the energy class directive to an object.

35
00:02:43,070 --> 00:02:48,830
In this object, we're going to set the border green for class to the following condition.

36
00:02:49,160 --> 00:02:53,330
Screenshot equals equals equals selected screenshot.

37
00:02:55,860 --> 00:03:02,040
The class gets applied if the screenshot in the current iteration matches the selected screenshot by

38
00:03:02,040 --> 00:03:02,670
the user.

39
00:03:03,000 --> 00:03:08,790
Next, we're going to add a class called Border Transparent with the following condition.

40
00:03:09,120 --> 00:03:12,570
Screenshot does not equal selected screenshot.

41
00:03:15,120 --> 00:03:18,060
The condition is the opposite of the other condition.

42
00:03:18,330 --> 00:03:22,560
We are checking if the screen shot values are not equal to each other.

43
00:03:22,860 --> 00:03:25,050
There's one more step at the moment.

44
00:03:25,230 --> 00:03:27,900
The same screenshot will always be selected.

45
00:03:28,230 --> 00:03:32,760
Screenshots should be updated when they're clicked on on the image tag.

46
00:03:32,790 --> 00:03:34,920
We're going to bind the click event.

47
00:03:37,400 --> 00:03:43,640
In this event, we're going to update the selected screenshot property to the screenshot variable.

48
00:03:46,180 --> 00:03:51,070
After making those changes, let's try testing our form by uploading a file.

49
00:03:56,580 --> 00:04:00,950
By default, the first image is selected, which is what we want it.

50
00:04:01,290 --> 00:04:05,100
We can click on any of the screenshots to change the thumbnail.

51
00:04:05,340 --> 00:04:07,470
It's the behavior we were looking for.

52
00:04:07,680 --> 00:04:10,800
We can start uploading our screenshot to Firebase.

53
00:04:11,040 --> 00:04:14,400
Let's begin handling this action in the next lecture.