1 00:00:00,120 --> 00:00:07,350 In this lecture, the objective is to grab the file from the drop event, will prepare the file before 2 00:00:07,350 --> 00:00:08,790 initiating the upload. 3 00:00:09,150 --> 00:00:10,740 Let's jump right into it. 4 00:00:11,010 --> 00:00:14,280 We'll continue working in the upload component class. 5 00:00:14,610 --> 00:00:18,210 The first step is to grab the file dropped onto the element. 6 00:00:18,720 --> 00:00:23,700 The drop event we're listening to will pass along the files the user has dropped. 7 00:00:24,060 --> 00:00:27,480 Our files are accessible through the event object. 8 00:00:27,870 --> 00:00:34,980 The event object is the same object you would come across in any other JavaScript event inside the store 9 00:00:34,980 --> 00:00:35,970 file function. 10 00:00:36,120 --> 00:00:38,490 We're going to log the event object. 11 00:00:38,820 --> 00:00:42,020 We want to check out what's inside before we move on. 12 00:00:44,450 --> 00:00:48,140 Next, we'll switch to the browser with the console opened. 13 00:00:48,410 --> 00:00:50,990 Drag and drop a file onto the uploader. 14 00:00:53,540 --> 00:01:01,220 Inside the console, the event object is locked opening its contents will reveal a long list of properties. 15 00:01:01,550 --> 00:01:06,290 The one property will want to focus on is the data transfer object. 16 00:01:08,970 --> 00:01:14,910 This object will contain the contents of the files transfer, there's a property called files. 17 00:01:15,210 --> 00:01:18,300 It's an object of files that were dropped on the element. 18 00:01:18,660 --> 00:01:22,680 However, if we look at the files property, it'll be empty. 19 00:01:23,070 --> 00:01:26,970 This output is very mysterious because we did everything right. 20 00:01:27,300 --> 00:01:33,660 You may assume there's an error in our code, but it's actually not our fault for one reason or another. 21 00:01:33,840 --> 00:01:38,490 Chrome will not log the files unless you access the files directly. 22 00:01:38,820 --> 00:01:40,290 Let me show you what I mean. 23 00:01:40,800 --> 00:01:43,530 Let's go back to the editor in our class. 24 00:01:43,590 --> 00:01:46,320 We will define a property called file. 25 00:01:48,730 --> 00:01:52,480 We will store the file locally in the component as a property. 26 00:01:52,840 --> 00:01:55,960 The type for this property will be a union type. 27 00:01:56,380 --> 00:01:59,860 The property's value can either be file or null. 28 00:02:02,460 --> 00:02:06,690 Lastly, we will initialize the property with a no value. 29 00:02:09,220 --> 00:02:16,030 Moving onward, the next step is to update this property when the upload is initialized inside these 30 00:02:16,030 --> 00:02:17,320 store file method. 31 00:02:17,470 --> 00:02:23,170 We will update this property to the event that data transfer files property. 32 00:02:25,710 --> 00:02:32,940 TypeScript will throw an error at us it indicates the data transfer property does not exist on the event 33 00:02:32,940 --> 00:02:33,570 object. 34 00:02:33,930 --> 00:02:35,280 This is somewhat true. 35 00:02:35,640 --> 00:02:39,810 Not every event object will define the data transfer property. 36 00:02:40,140 --> 00:02:42,720 We need to be more specific with our types. 37 00:02:42,930 --> 00:02:46,680 Let's wrap the event properly with a pair of parentheses. 38 00:02:47,040 --> 00:02:49,590 We will assert the tie with the as key. 39 00:02:50,430 --> 00:02:52,680 The new type is called drag event. 40 00:02:55,190 --> 00:03:01,790 By using the as key word, we can assert the type as opposed to letting the TypeScript compiler infer 41 00:03:01,790 --> 00:03:05,330 the type, another error will appear this time. 42 00:03:05,460 --> 00:03:09,950 TypeScript can't guarantee the data transfer will be an object. 43 00:03:10,340 --> 00:03:11,890 This property may be set. 44 00:03:11,900 --> 00:03:15,860 You know, we will add optional chaining to remove this error. 45 00:03:16,160 --> 00:03:19,880 Moving forward, we're interested in uploading the first file. 46 00:03:20,210 --> 00:03:24,650 At the moment, we are grabbing all files dropped onto the drop box. 47 00:03:24,890 --> 00:03:28,880 We are going to call the item function on the files property. 48 00:03:31,460 --> 00:03:34,100 We are working with an object, not an array. 49 00:03:34,400 --> 00:03:41,930 Luckily, the files object has a function to grab files like an array, we can pass in an index to retrieve 50 00:03:41,960 --> 00:03:43,310 a specific value. 51 00:03:43,730 --> 00:03:46,100 File lists are zero indexed. 52 00:03:46,370 --> 00:03:50,000 The first file will be stored under the zero index. 53 00:03:50,540 --> 00:03:57,170 After adding this function, TypeScript will complain about the return value, according to TypeScript. 54 00:03:57,440 --> 00:04:01,790 It's possible we may be returned an unidentified value. 55 00:04:02,210 --> 00:04:06,560 Our final property is constrained to files or null values. 56 00:04:06,950 --> 00:04:09,320 There are two ways we can fix this error. 57 00:04:09,620 --> 00:04:13,760 We can update the file property to allow undefined values. 58 00:04:14,000 --> 00:04:18,260 Alternatively, we can use the nolice coalescing operator. 59 00:04:18,860 --> 00:04:23,870 I think this would be a great opportunity to practice with the Knowledge Coalescing Operator. 60 00:04:24,230 --> 00:04:30,350 The Knowledge Coalescing operator can intercept undefined values after the item function. 61 00:04:30,560 --> 00:04:32,360 We will add this operator. 62 00:04:32,570 --> 00:04:36,620 If we're returned an undefined value, we will return null. 63 00:04:39,220 --> 00:04:40,810 The error has gone away. 64 00:04:41,080 --> 00:04:41,980 Fantastic. 65 00:04:42,280 --> 00:04:45,430 Next, let's update the log with the variable. 66 00:04:47,950 --> 00:04:52,240 Going back to the browser will drop a file onto the uploader again. 67 00:04:54,890 --> 00:05:00,890 Just like magic, the files property is filled with information related to the file drops. 68 00:05:01,340 --> 00:05:03,440 This error is a gotcha with Chrome. 69 00:05:03,860 --> 00:05:10,220 If you're trying to debug drag and drop operations, you need to access the properties directly to see 70 00:05:10,220 --> 00:05:11,120 their values. 71 00:05:11,420 --> 00:05:16,070 Simply logging the object in general will result in an empty array. 72 00:05:16,490 --> 00:05:20,210 It's a weird bug in Chrome, but I thought I'd let you know just in case. 73 00:05:20,510 --> 00:05:24,980 Back in the editor, validation should be performed on the files type. 74 00:05:25,340 --> 00:05:31,070 If the user attempts to upload a file other than a video file will reject the file. 75 00:05:31,400 --> 00:05:37,730 Validation can be performed in Firebase, but will perform it on the client side as an extra precaution. 76 00:05:38,060 --> 00:05:41,030 Inside the function create a conditional block. 77 00:05:41,360 --> 00:05:43,130 The condition will be the following. 78 00:05:43,430 --> 00:05:45,680 Not this file. 79 00:05:45,860 --> 00:05:49,670 This file Typekit type does not equal. 80 00:05:49,790 --> 00:05:52,040 VIDEO Slash MP for. 81 00:05:54,750 --> 00:05:58,950 The first condition is checking if the final property is not empty. 82 00:05:59,310 --> 00:06:03,720 There isn't a point in checking the file type if a file doesn't exist. 83 00:06:04,080 --> 00:06:08,550 As for the second condition, I want to quickly go over my types. 84 00:06:10,970 --> 00:06:15,140 A mime type is a label to identify the type of data in a file. 85 00:06:15,410 --> 00:06:19,460 They're similar to extensions, except they can't be changed easily. 86 00:06:19,790 --> 00:06:26,420 It's more practical to check for a file's mime type, then check for the extension mime types or formatted 87 00:06:26,420 --> 00:06:28,070 by their type and subtype. 88 00:06:28,340 --> 00:06:29,870 A slash separates them. 89 00:06:30,500 --> 00:06:34,540 The type is the general category a file belongs to. 90 00:06:35,000 --> 00:06:38,970 This is why you may see some mime types with similar values. 91 00:06:39,260 --> 00:06:43,760 For example, video files are assigned under the video category. 92 00:06:44,120 --> 00:06:47,270 The subtype is the specific type of file. 93 00:06:47,690 --> 00:06:51,980 This part of the mime type is where most mime types differ from one another. 94 00:06:52,340 --> 00:06:56,000 I provided some examples of mime types for this course. 95 00:06:56,090 --> 00:06:59,720 We're going to be checking if the file is an MP for file. 96 00:07:02,390 --> 00:07:09,200 Other video types can be used in the resource section of this lecture, I provide a link to a Wikipedia 97 00:07:09,200 --> 00:07:15,890 page with information about what video types are supported, in which browsers and before files are 98 00:07:15,890 --> 00:07:18,260 generally supported in most browsers. 99 00:07:18,650 --> 00:07:23,930 Some browsers will not support certain file types due to patents or licensing issues. 100 00:07:24,470 --> 00:07:29,690 We'll keep it simple by limiting support to MP for files back in the editor. 101 00:07:29,870 --> 00:07:37,160 We want to check if the mime type isn't VIDEO again, for if it isn't, we'll return the function. 102 00:07:39,780 --> 00:07:45,900 This return statement will end the current iteration of the Loop if the user makes it to this point, 103 00:07:46,050 --> 00:07:49,350 we can begin moving on to the next step in the form. 104 00:07:49,740 --> 00:07:53,190 Let's handle this part of the process in the next lecture.