In this lecture, we're going to begin the upload process by using drag and drop events by default,
most browsers will load the file in the browser depending on the file type.
This behavior will move them away from the app.
I'm going to drag an image onto the Dropbox as I do, so the file will be opened in a new tab.
You may experience a different behavior.
The file may open on the same page.
Either way, this behavior is not what we're looking for.
We should prevent the behavior of the browser before proceeding with the upload.
This scenario is a perfect opportunity to use a directive.
Preventing the behavior of the browser can be outsourced to a custom directive.
We are going to design the directive to be reusable.
This directive should be able to prevent the default behavior on any element.
Let's get started.
Directives can be generated through the command line in the command line.
We will run the following command Nji G.
Directive shared slash directives slash event blocker.
We are declaring lead directive with the shared module.
The goal is to make this directive reusable throughout our app after creating this directive.
We will need to export it openly shared module.
The Seelye will import and declare the directive with the module.
However, it will not be exported if we want this directive to be usable in other modules.
We will need to end the event blocker directive to the exports array.
Next, let's import this module into the video module, otherwise we won't be able to use our new directive.
Open the video module file.
At the top of the file, we will import the shared module.
Lastly, we will add the shared module to the imports array.
Great.
Let's begin working on the directive.
We can find the directive under the shared slash modules directory.
Angular will create two files, one file for the directive and another file for testing the directive.
We are going to ignore the test file.
Let's open the class file.
Inside this file, we will find the minimum set up for a directive.
Directives are defined as classes decorated with the directive decorator.
We can pass in an object to configure the directive.
In this example, the Selecter property will configure the name of the directive.
At the moment its camel case, I prefer lowercase words separated with dashes.
This naming convention is standard with most attributes.
The value is wrapped with a pair of square brackets, which is how attributes are selected in C assess
the value must be a valid C assess selector.
Moving on, we can inject services into directives through the constructor function.
Usually we would have to add the injectable decorator to the class.
We can avoid adding this decorator altogether.
The directive decorator will allow the class to be injected with services for this demonstration.
We're not going to be injecting services into the directive.
It's completely fine to remove the constructor function from the class definition.
Our primary goal of this directive is to block and events default behavior.
We're going to need access to the host element.
A host element refers to the element.
The directive is attached to angular exports decorators for helping us access the host element at the
top of the file.
We will import a decorator called host listener from the angular core package.
The host listener decorator performs two actions.
First, it also let the host element.
Secondly, it will listen to an event on the host.
As you can already guess, it's perfect for our scenario.
We can use this decorator to prevent the default behavior of the host elements events inside the class.
We will define a public method called handle event.
It'll be decorated with the host listener decorator.
The name of the method doesn't matter.
The host, listener decorator will automatically invoke this method on our behalf.
This decorator has two arguments.
The first argument is the name of the event.
We're going to listen to an event called Drop.
The drop event is emitted when the user has released an element or text selection on an element.
This event can be triggered when the user releases their mouse or by pressing the escape key.
After listening for this event, we need to pass the event object from the element to our function.
Unfortunately, we're not in the template anymore.
We can't pass on the event object like we used to.
Luckily, the host listener decorator has us covered.
The second argument is an array of values to pass on to the function inside this array.
We will and the dollar sign event object.
The host listener DirecTV will understand that we want the event object.
We're almost finished inside the function.
We will accept the event object for type checking.
We will annotate this argument with the event type.
Inside this function, we will call the prevent default function.
If you would like as an extra precaution, you can call the stop propagation function to prevent bowling.
However, that shouldn't be a problem here.
There's one last piece of code I want to add to this function at the moment.
We're listening to the drop event.
It's not the only event that can cause the file to be opened by the browser.
There's another event called Drag Over.
The drag over event is emitted when an element or selection is dragged over an element.
This event can cause the file to be opened.
We should prevent the default behavior of this event.
One solution would be to make a copy of the handle event function with the host, listener or decorator.
The function would have to be renamed something like handle event to this solution works, but we would
have to make multiple copies of every event to stop the default behavior.
Alternatively, we can apply the host listener decorator twice to the handle event function.
We're not limited to a single decorator.
Multiple decorators can be applied to a single method.
We can even use the same decorator.
Let's remove the second method.
Next, we will apply the host listener decorator to the handle event method on the second decorator.
Let's listen to the drag over event.
The directive we've written will prevent unexpected behavior when a file is dropped onto an element.
We don't want the user to be redirected away from the app when they drop a file.
We want to handle what happens when a file is dropped.
Using this directive will stop the default behavior.
Let's test if our directive works, switch over to the upload template file on the div tag.
We are going to add the App Event Blocker Directive.
Next, switch over to the browser.
For this demonstration, I'm going to drag and drop an image file.
If I were to drag and drop a file anywhere on the page but the uploader, the browser would load the
file.
This is the default behavior going back.
I'll drag and drop the file again, but this time onto the uploader.
After dropping the file.
Nothing happens.
The page doesn't change like last time.
Whenever we're dealing with the events, we should always try to stop the default behavior.
We've created a reusable directive if we need to support other events.
We can add multiple host listener decorators to our methods in the next lecture.
We are going to continue working on the uploader.