In this lecture, we are going to handle a couple of events on the drop box.
There's one issue with the drop box.
You may have noticed it already.
If we were to hover our mouse over this element, the boxes color would turn into go.
The hover effect works fine until we attempt to drag files over the element.
The hover effect doesn't get applied.
We'll have to use JavaScript to achieve the hover effect.
It's an excellent way to indicate to the user that we're aware they're trying to drag and drop a file
onto the uploader.
Let's switch back to the editor.
In the upload component class, we're going to keep track of the hover state as a property, define
a property called is drag over with an initial value of false.
This property will be responsible for keeping track of a file being dragged over an element by default.
We are going to assume the drop boxes appearance should remain unchanged.
A set of classes should be applied if a file is hovering over the elements.
The next step is to update this property based on events emitted by the drop box in the upload template.
We are going to listen to a few events on the Dropbox elements on the elements.
Listen for the following events.
Drag and.
Drag over.
Drag enter.
Drag leave.
Mouse leave.
Drop.
We're listening to many events, but it's necessary to listen to them because we may experience unexpected
behavior if we don't account for them.
These are native browser events.
They're not specific to angular.
Let's review each of them.
The drag end event is emitted when an element is no longer being dragged on.
We've already gone over the drag over event.
It gets emitted whenever an element or selection is being dragged on.
The element the drag enter event is emitted when the user begins to drag something onto the element.
The drag leave event is emitted when the item that was previously dragged over the element is no longer
being dragged over it.
Next, the mouse leave event gets emitted when the mouse is no longer hovering over an element.
Lastly, we have the drop event.
We're familiar with this event, too.
It gets emitted when something is dropped onto the element.
In our case, this would be a file before we perform changes.
I want you to be aware of other events related to dragging there the drag and drag start events.
The drag event is emitted when the element it's applying to is being dragged.
For example, if I were to click on the element in the browser and begin dragging it, this would trigger
the event.
The drag start event is emitted when an element is starting to be dragged.
We aren't going to be using these events.
It's not necessary to listen to them to change the appearance of the drop box.
It's time to update the is drag over a property.
We're going to set the IS drag over data property to true if the events drag over and drag enter are
emitted.
Both events are emitted when a file hovers over the elements or want to change the drop boxes appearance
during these moments.
Next, we'll set the IS drag over property to false in the drag and drag leave and mouse leave events.
Both events are emitted when the user stops dragging the file over the elements by setting the property
to false.
We will reset the Dropbox's appearance, thus removing the hover effect.
The last step is to start changing the appearance of the drop box with tailwind classes.
We're going to bind the NZ Class Directive, the div element.
The directive should be bound to an object.
We're going to bind the following classes as one property league Indigo 400 border, Indigo 400 Border
Solid.
These classes will apply the hover effect we wish to achieve.
We want to dynamically bind this class if the user is dragging something onto the element will want
to remove them if they move away from the element.
Since we're dealing with binding classes on a conditional basis, let's try using object syntax.
The value for the property will be used as the condition.
Our condition will be the issue drag over property.
We're finished with binding the classes.
There's one more event we need to deal with, the drop event will be a special case.
We will not directly change that property in the expression, as we did with the other events.
We'll do that inside the method because we want to do more than remove the class.
We'll want to grab the files and initialize the upload process.
It would be better to outsource the logic into a method.
We will run a method called store file when this event gets emitted.
The final data will become available through the event object.
Let's pass along the event object to the store file method.
Next, we should define this method in our class.
Switch over to the upload component class.
Define these store file method with a parameter called event.
The event parameter should be annotated with the event type inside, the function will simply is drag
over property to false.
Our Dropbox has been finalized.
We've taken care of removing the color effect after a file has been dropped onto the element.
Save your changes, then proceed to the browser.
If we did everything right, we should see the drop box change color whenever dragging a file onto it.
Let's try dropping some files over the Dropbox.
After dropping a file onto the elements, the class is removed because the color fades away.
Fantastic.
We've successfully added drag and drop support to the elements.
The next step is to begin handling the file upload once a file has been dropped.
We will initialize the upload process to Firebase will begin this step in the following lecture.