1 00:00:00,910 --> 00:00:07,120 In this lecture, we're going to begin the upload process by using drag and drop events by default, 2 00:00:07,360 --> 00:00:11,830 most browsers will load the file in the browser depending on the file type. 3 00:00:12,160 --> 00:00:14,830 This behavior will move them away from the app. 4 00:00:15,400 --> 00:00:21,880 I'm going to drag an image onto the Dropbox as I do, so the file will be opened in a new tab. 5 00:00:22,210 --> 00:00:24,430 You may experience a different behavior. 6 00:00:24,730 --> 00:00:26,920 The file may open on the same page. 7 00:00:27,250 --> 00:00:30,550 Either way, this behavior is not what we're looking for. 8 00:00:30,850 --> 00:00:35,260 We should prevent the behavior of the browser before proceeding with the upload. 9 00:00:35,890 --> 00:00:39,730 This scenario is a perfect opportunity to use a directive. 10 00:00:40,000 --> 00:00:44,770 Preventing the behavior of the browser can be outsourced to a custom directive. 11 00:00:45,100 --> 00:00:48,250 We are going to design the directive to be reusable. 12 00:00:48,670 --> 00:00:53,140 This directive should be able to prevent the default behavior on any element. 13 00:00:53,380 --> 00:00:54,460 Let's get started. 14 00:00:55,120 --> 00:00:59,430 Directives can be generated through the command line in the command line. 15 00:00:59,470 --> 00:01:03,180 We will run the following command Nji G. 16 00:01:03,220 --> 00:01:08,230 Directive shared slash directives slash event blocker. 17 00:01:10,810 --> 00:01:14,080 We are declaring lead directive with the shared module. 18 00:01:14,350 --> 00:01:20,480 The goal is to make this directive reusable throughout our app after creating this directive. 19 00:01:20,500 --> 00:01:23,950 We will need to export it openly shared module. 20 00:01:26,440 --> 00:01:30,400 The Seelye will import and declare the directive with the module. 21 00:01:30,640 --> 00:01:36,960 However, it will not be exported if we want this directive to be usable in other modules. 22 00:01:37,000 --> 00:01:41,470 We will need to end the event blocker directive to the exports array. 23 00:01:44,000 --> 00:01:51,380 Next, let's import this module into the video module, otherwise we won't be able to use our new directive. 24 00:01:51,620 --> 00:01:53,900 Open the video module file. 25 00:01:56,410 --> 00:02:00,130 At the top of the file, we will import the shared module. 26 00:02:02,570 --> 00:02:06,770 Lastly, we will add the shared module to the imports array. 27 00:02:09,380 --> 00:02:09,860 Great. 28 00:02:10,039 --> 00:02:12,200 Let's begin working on the directive. 29 00:02:12,380 --> 00:02:16,700 We can find the directive under the shared slash modules directory. 30 00:02:17,090 --> 00:02:23,720 Angular will create two files, one file for the directive and another file for testing the directive. 31 00:02:24,050 --> 00:02:26,210 We are going to ignore the test file. 32 00:02:26,480 --> 00:02:28,250 Let's open the class file. 33 00:02:30,890 --> 00:02:34,850 Inside this file, we will find the minimum set up for a directive. 34 00:02:35,180 --> 00:02:40,070 Directives are defined as classes decorated with the directive decorator. 35 00:02:40,400 --> 00:02:43,940 We can pass in an object to configure the directive. 36 00:02:44,300 --> 00:02:49,460 In this example, the Selecter property will configure the name of the directive. 37 00:02:49,730 --> 00:02:55,820 At the moment its camel case, I prefer lowercase words separated with dashes. 38 00:02:58,340 --> 00:03:01,760 This naming convention is standard with most attributes. 39 00:03:02,030 --> 00:03:08,060 The value is wrapped with a pair of square brackets, which is how attributes are selected in C assess 40 00:03:08,450 --> 00:03:11,600 the value must be a valid C assess selector. 41 00:03:12,140 --> 00:03:17,390 Moving on, we can inject services into directives through the constructor function. 42 00:03:17,750 --> 00:03:22,310 Usually we would have to add the injectable decorator to the class. 43 00:03:22,610 --> 00:03:25,670 We can avoid adding this decorator altogether. 44 00:03:26,060 --> 00:03:32,720 The directive decorator will allow the class to be injected with services for this demonstration. 45 00:03:32,810 --> 00:03:36,440 We're not going to be injecting services into the directive. 46 00:03:36,770 --> 00:03:41,960 It's completely fine to remove the constructor function from the class definition. 47 00:03:44,650 --> 00:03:49,510 Our primary goal of this directive is to block and events default behavior. 48 00:03:49,900 --> 00:03:52,900 We're going to need access to the host element. 49 00:03:53,320 --> 00:03:55,740 A host element refers to the element. 50 00:03:55,750 --> 00:04:03,280 The directive is attached to angular exports decorators for helping us access the host element at the 51 00:04:03,280 --> 00:04:04,360 top of the file. 52 00:04:04,450 --> 00:04:10,570 We will import a decorator called host listener from the angular core package. 53 00:04:13,130 --> 00:04:16,730 The host listener decorator performs two actions. 54 00:04:17,029 --> 00:04:19,760 First, it also let the host element. 55 00:04:20,060 --> 00:04:23,390 Secondly, it will listen to an event on the host. 56 00:04:23,690 --> 00:04:27,140 As you can already guess, it's perfect for our scenario. 57 00:04:27,410 --> 00:04:34,460 We can use this decorator to prevent the default behavior of the host elements events inside the class. 58 00:04:34,550 --> 00:04:37,700 We will define a public method called handle event. 59 00:04:38,060 --> 00:04:41,390 It'll be decorated with the host listener decorator. 60 00:04:44,030 --> 00:04:45,980 The name of the method doesn't matter. 61 00:04:46,250 --> 00:04:51,350 The host, listener decorator will automatically invoke this method on our behalf. 62 00:04:51,620 --> 00:04:53,900 This decorator has two arguments. 63 00:04:54,140 --> 00:04:56,990 The first argument is the name of the event. 64 00:04:57,320 --> 00:05:00,290 We're going to listen to an event called Drop. 65 00:05:02,950 --> 00:05:09,130 The drop event is emitted when the user has released an element or text selection on an element. 66 00:05:09,520 --> 00:05:14,980 This event can be triggered when the user releases their mouse or by pressing the escape key. 67 00:05:15,640 --> 00:05:21,850 After listening for this event, we need to pass the event object from the element to our function. 68 00:05:22,210 --> 00:05:25,030 Unfortunately, we're not in the template anymore. 69 00:05:25,300 --> 00:05:28,570 We can't pass on the event object like we used to. 70 00:05:28,840 --> 00:05:32,770 Luckily, the host listener decorator has us covered. 71 00:05:33,220 --> 00:05:39,160 The second argument is an array of values to pass on to the function inside this array. 72 00:05:39,250 --> 00:05:42,220 We will and the dollar sign event object. 73 00:05:44,760 --> 00:05:49,380 The host listener DirecTV will understand that we want the event object. 74 00:05:49,710 --> 00:05:52,300 We're almost finished inside the function. 75 00:05:52,320 --> 00:05:56,140 We will accept the event object for type checking. 76 00:05:56,160 --> 00:05:59,250 We will annotate this argument with the event type. 77 00:06:01,870 --> 00:06:05,920 Inside this function, we will call the prevent default function. 78 00:06:08,480 --> 00:06:15,020 If you would like as an extra precaution, you can call the stop propagation function to prevent bowling. 79 00:06:15,380 --> 00:06:17,660 However, that shouldn't be a problem here. 80 00:06:17,960 --> 00:06:22,340 There's one last piece of code I want to add to this function at the moment. 81 00:06:22,430 --> 00:06:24,260 We're listening to the drop event. 82 00:06:24,530 --> 00:06:28,760 It's not the only event that can cause the file to be opened by the browser. 83 00:06:29,120 --> 00:06:31,940 There's another event called Drag Over. 84 00:06:32,600 --> 00:06:38,270 The drag over event is emitted when an element or selection is dragged over an element. 85 00:06:38,750 --> 00:06:41,180 This event can cause the file to be opened. 86 00:06:41,540 --> 00:06:44,600 We should prevent the default behavior of this event. 87 00:06:45,050 --> 00:06:51,470 One solution would be to make a copy of the handle event function with the host, listener or decorator. 88 00:06:54,020 --> 00:07:00,650 The function would have to be renamed something like handle event to this solution works, but we would 89 00:07:00,650 --> 00:07:05,330 have to make multiple copies of every event to stop the default behavior. 90 00:07:05,870 --> 00:07:12,320 Alternatively, we can apply the host listener decorator twice to the handle event function. 91 00:07:12,950 --> 00:07:15,350 We're not limited to a single decorator. 92 00:07:15,620 --> 00:07:18,830 Multiple decorators can be applied to a single method. 93 00:07:19,160 --> 00:07:21,410 We can even use the same decorator. 94 00:07:21,680 --> 00:07:23,630 Let's remove the second method. 95 00:07:26,340 --> 00:07:33,780 Next, we will apply the host listener decorator to the handle event method on the second decorator. 96 00:07:33,930 --> 00:07:36,450 Let's listen to the drag over event. 97 00:07:39,140 --> 00:07:45,380 The directive we've written will prevent unexpected behavior when a file is dropped onto an element. 98 00:07:45,770 --> 00:07:50,390 We don't want the user to be redirected away from the app when they drop a file. 99 00:07:50,720 --> 00:07:54,050 We want to handle what happens when a file is dropped. 100 00:07:54,380 --> 00:07:57,560 Using this directive will stop the default behavior. 101 00:07:58,100 --> 00:08:04,740 Let's test if our directive works, switch over to the upload template file on the div tag. 102 00:08:04,820 --> 00:08:08,180 We are going to add the App Event Blocker Directive. 103 00:08:10,640 --> 00:08:12,920 Next, switch over to the browser. 104 00:08:15,390 --> 00:08:19,290 For this demonstration, I'm going to drag and drop an image file. 105 00:08:19,710 --> 00:08:25,290 If I were to drag and drop a file anywhere on the page but the uploader, the browser would load the 106 00:08:25,290 --> 00:08:25,770 file. 107 00:08:26,100 --> 00:08:28,860 This is the default behavior going back. 108 00:08:29,010 --> 00:08:33,270 I'll drag and drop the file again, but this time onto the uploader. 109 00:08:35,950 --> 00:08:37,419 After dropping the file. 110 00:08:37,570 --> 00:08:38,559 Nothing happens. 111 00:08:38,860 --> 00:08:41,169 The page doesn't change like last time. 112 00:08:41,590 --> 00:08:46,510 Whenever we're dealing with the events, we should always try to stop the default behavior. 113 00:08:46,930 --> 00:08:52,060 We've created a reusable directive if we need to support other events. 114 00:08:52,270 --> 00:08:57,820 We can add multiple host listener decorators to our methods in the next lecture. 115 00:08:57,970 --> 00:09:00,940 We are going to continue working on the uploader.