1
00:00:00,150 --> 00:00:04,830
In this lecture, we are going to handle a couple of events on the drop box.

2
00:00:05,160 --> 00:00:07,260
There's one issue with the drop box.

3
00:00:07,500 --> 00:00:09,210
You may have noticed it already.

4
00:00:09,570 --> 00:00:14,910
If we were to hover our mouse over this element, the boxes color would turn into go.

5
00:00:15,330 --> 00:00:20,370
The hover effect works fine until we attempt to drag files over the element.

6
00:00:22,980 --> 00:00:25,200
The hover effect doesn't get applied.

7
00:00:25,530 --> 00:00:28,950
We'll have to use JavaScript to achieve the hover effect.

8
00:00:29,280 --> 00:00:34,860
It's an excellent way to indicate to the user that we're aware they're trying to drag and drop a file

9
00:00:34,860 --> 00:00:36,000
onto the uploader.

10
00:00:36,330 --> 00:00:38,220
Let's switch back to the editor.

11
00:00:40,780 --> 00:00:47,140
In the upload component class, we're going to keep track of the hover state as a property, define

12
00:00:47,140 --> 00:00:51,610
a property called is drag over with an initial value of false.

13
00:00:54,240 --> 00:01:00,960
This property will be responsible for keeping track of a file being dragged over an element by default.

14
00:01:01,110 --> 00:01:05,700
We are going to assume the drop boxes appearance should remain unchanged.

15
00:01:06,000 --> 00:01:10,500
A set of classes should be applied if a file is hovering over the elements.

16
00:01:11,100 --> 00:01:18,120
The next step is to update this property based on events emitted by the drop box in the upload template.

17
00:01:18,330 --> 00:01:23,520
We are going to listen to a few events on the Dropbox elements on the elements.

18
00:01:23,610 --> 00:01:25,650
Listen for the following events.

19
00:01:26,250 --> 00:01:27,240
Drag and.

20
00:01:29,840 --> 00:01:30,800
Drag over.

21
00:01:33,350 --> 00:01:34,310
Drag enter.

22
00:01:36,910 --> 00:01:37,900
Drag leave.

23
00:01:40,550 --> 00:01:41,510
Mouse leave.

24
00:01:44,360 --> 00:01:44,900
Drop.

25
00:01:47,720 --> 00:01:54,080
We're listening to many events, but it's necessary to listen to them because we may experience unexpected

26
00:01:54,080 --> 00:01:56,270
behavior if we don't account for them.

27
00:01:56,750 --> 00:01:58,700
These are native browser events.

28
00:01:58,940 --> 00:02:00,800
They're not specific to angular.

29
00:02:01,370 --> 00:02:02,900
Let's review each of them.

30
00:02:03,200 --> 00:02:08,660
The drag end event is emitted when an element is no longer being dragged on.

31
00:02:09,080 --> 00:02:11,750
We've already gone over the drag over event.

32
00:02:11,990 --> 00:02:16,310
It gets emitted whenever an element or selection is being dragged on.

33
00:02:16,310 --> 00:02:23,660
The element the drag enter event is emitted when the user begins to drag something onto the element.

34
00:02:24,050 --> 00:02:30,620
The drag leave event is emitted when the item that was previously dragged over the element is no longer

35
00:02:30,620 --> 00:02:31,940
being dragged over it.

36
00:02:32,450 --> 00:02:38,720
Next, the mouse leave event gets emitted when the mouse is no longer hovering over an element.

37
00:02:39,350 --> 00:02:41,870
Lastly, we have the drop event.

38
00:02:42,200 --> 00:02:44,180
We're familiar with this event, too.

39
00:02:44,510 --> 00:02:47,990
It gets emitted when something is dropped onto the element.

40
00:02:48,260 --> 00:02:52,550
In our case, this would be a file before we perform changes.

41
00:02:52,730 --> 00:03:00,200
I want you to be aware of other events related to dragging there the drag and drag start events.

42
00:03:00,680 --> 00:03:05,690
The drag event is emitted when the element it's applying to is being dragged.

43
00:03:06,050 --> 00:03:12,080
For example, if I were to click on the element in the browser and begin dragging it, this would trigger

44
00:03:12,080 --> 00:03:12,770
the event.

45
00:03:13,160 --> 00:03:17,960
The drag start event is emitted when an element is starting to be dragged.

46
00:03:18,350 --> 00:03:20,750
We aren't going to be using these events.

47
00:03:21,050 --> 00:03:25,790
It's not necessary to listen to them to change the appearance of the drop box.

48
00:03:26,390 --> 00:03:29,810
It's time to update the is drag over a property.

49
00:03:30,200 --> 00:03:37,220
We're going to set the IS drag over data property to true if the events drag over and drag enter are

50
00:03:37,220 --> 00:03:37,730
emitted.

51
00:03:40,360 --> 00:03:46,990
Both events are emitted when a file hovers over the elements or want to change the drop boxes appearance

52
00:03:46,990 --> 00:03:48,160
during these moments.

53
00:03:48,460 --> 00:03:56,500
Next, we'll set the IS drag over property to false in the drag and drag leave and mouse leave events.

54
00:03:59,060 --> 00:04:05,150
Both events are emitted when the user stops dragging the file over the elements by setting the property

55
00:04:05,150 --> 00:04:05,900
to false.

56
00:04:06,110 --> 00:04:11,000
We will reset the Dropbox's appearance, thus removing the hover effect.

57
00:04:11,390 --> 00:04:17,000
The last step is to start changing the appearance of the drop box with tailwind classes.

58
00:04:17,630 --> 00:04:21,829
We're going to bind the NZ Class Directive, the div element.

59
00:04:22,160 --> 00:04:24,620
The directive should be bound to an object.

60
00:04:27,110 --> 00:04:36,170
We're going to bind the following classes as one property league Indigo 400 border, Indigo 400 Border

61
00:04:36,170 --> 00:04:36,770
Solid.

62
00:04:39,470 --> 00:04:43,310
These classes will apply the hover effect we wish to achieve.

63
00:04:43,580 --> 00:04:50,000
We want to dynamically bind this class if the user is dragging something onto the element will want

64
00:04:50,000 --> 00:04:53,030
to remove them if they move away from the element.

65
00:04:53,450 --> 00:04:59,840
Since we're dealing with binding classes on a conditional basis, let's try using object syntax.

66
00:05:00,170 --> 00:05:03,500
The value for the property will be used as the condition.

67
00:05:03,950 --> 00:05:07,370
Our condition will be the issue drag over property.

68
00:05:09,950 --> 00:05:12,140
We're finished with binding the classes.

69
00:05:12,410 --> 00:05:17,630
There's one more event we need to deal with, the drop event will be a special case.

70
00:05:17,900 --> 00:05:23,240
We will not directly change that property in the expression, as we did with the other events.

71
00:05:23,540 --> 00:05:28,340
We'll do that inside the method because we want to do more than remove the class.

72
00:05:28,640 --> 00:05:32,510
We'll want to grab the files and initialize the upload process.

73
00:05:33,200 --> 00:05:36,320
It would be better to outsource the logic into a method.

74
00:05:36,740 --> 00:05:41,450
We will run a method called store file when this event gets emitted.

75
00:05:44,070 --> 00:05:48,150
The final data will become available through the event object.

76
00:05:48,450 --> 00:05:52,620
Let's pass along the event object to the store file method.

77
00:05:55,290 --> 00:05:58,540
Next, we should define this method in our class.

78
00:05:58,800 --> 00:06:01,530
Switch over to the upload component class.

79
00:06:01,880 --> 00:06:05,940
Define these store file method with a parameter called event.

80
00:06:08,540 --> 00:06:15,590
The event parameter should be annotated with the event type inside, the function will simply is drag

81
00:06:15,590 --> 00:06:17,270
over property to false.

82
00:06:19,860 --> 00:06:22,080
Our Dropbox has been finalized.

83
00:06:22,350 --> 00:06:27,900
We've taken care of removing the color effect after a file has been dropped onto the element.

84
00:06:28,290 --> 00:06:31,230
Save your changes, then proceed to the browser.

85
00:06:33,840 --> 00:06:40,170
If we did everything right, we should see the drop box change color whenever dragging a file onto it.

86
00:06:40,500 --> 00:06:43,530
Let's try dropping some files over the Dropbox.

87
00:06:46,000 --> 00:06:51,520
After dropping a file onto the elements, the class is removed because the color fades away.

88
00:06:51,940 --> 00:06:52,840
Fantastic.

89
00:06:53,110 --> 00:06:56,800
We've successfully added drag and drop support to the elements.

90
00:06:57,130 --> 00:07:02,410
The next step is to begin handling the file upload once a file has been dropped.

91
00:07:02,590 --> 00:07:08,950
We will initialize the upload process to Firebase will begin this step in the following lecture.