1
00:00:00,090 --> 00:00:06,450
In this lecture, we're going to add fallback support for the uploader, adding drag and drop capability

2
00:00:06,450 --> 00:00:08,220
looks cool and it is.

3
00:00:08,430 --> 00:00:13,830
Despite that, we may want to consider adding a fallback because it is prone to errors.

4
00:00:14,100 --> 00:00:16,710
We did face a couple of issues when using it.

5
00:00:16,980 --> 00:00:23,040
In the resource section of this lecture, I provide a link to a site called Can I Use?

6
00:00:23,520 --> 00:00:26,100
I highly recommend bookmarking this site.

7
00:00:26,460 --> 00:00:31,650
This site will provide a list of browsers that provide support for a specific API.

8
00:00:32,040 --> 00:00:35,310
Most modern browsers support they drag and drop feature.

9
00:00:35,760 --> 00:00:38,970
Most mobile browsers do not support this API.

10
00:00:39,300 --> 00:00:43,290
Users on mobile devices will struggle with uploading files.

11
00:00:43,740 --> 00:00:50,160
In these cases, going with the tried and true is what will yield the best experience for our users.

12
00:00:50,490 --> 00:00:54,030
That's done by adding a file upload input field.

13
00:00:54,330 --> 00:00:58,890
It works on all browsers and devices because it's been around for a long time.

14
00:00:59,340 --> 00:01:02,400
Implementing the file input won't take much work.

15
00:01:02,670 --> 00:01:05,640
We've written most of the logic for uploading a file.

16
00:01:05,910 --> 00:01:09,330
The difference will be dealing with how we retrieve the file.

17
00:01:09,570 --> 00:01:14,040
Let's get started in the editor openly upload template file.

18
00:01:16,490 --> 00:01:19,700
Well, want to add a file input field to the template?

19
00:01:19,970 --> 00:01:25,490
We're going to place it under the drop box, the type attribute should be set to file.

20
00:01:28,040 --> 00:01:32,720
For extra spacing, let's add the empty for class to this element.

21
00:01:35,120 --> 00:01:38,180
This class will add margins to the top of the element.

22
00:01:38,450 --> 00:01:44,990
The next thing will want to do is listen to the change event during this event, call the store file

23
00:01:44,990 --> 00:01:47,900
function with the event object passed in.

24
00:01:50,570 --> 00:01:56,330
There's one more update will apply to the template, the input will always appear on the page.

25
00:01:56,630 --> 00:02:01,850
The structural directive will not affect this element when the user uploads a file.

26
00:02:02,150 --> 00:02:08,180
We're going to wrap the div elements and input element with a nji container element.

27
00:02:10,690 --> 00:02:17,260
Next will move the energy if directive from the div tag to the nji container element.

28
00:02:19,690 --> 00:02:20,980
Our template is ready.

29
00:02:21,220 --> 00:02:28,000
Unfortunately, it's not the only update we need to make files uploaded through the input element are

30
00:02:28,000 --> 00:02:30,970
stored in a different location, then drop events.

31
00:02:31,270 --> 00:02:37,750
These store file function will not be able to find the file switch over to the upload component class

32
00:02:37,750 --> 00:02:38,210
file.

33
00:02:38,470 --> 00:02:41,050
Scroll down to the store file function.

34
00:02:43,610 --> 00:02:48,260
Files are stored in another location if uploaded through a file input.

35
00:02:48,590 --> 00:02:52,800
Let's see where the list of files is stored inside the function.

36
00:02:52,850 --> 00:02:55,430
We're going to log the event object.

37
00:02:57,910 --> 00:03:03,330
Next, we'll proceed with uploading file through the file input in the browser.

38
00:03:08,980 --> 00:03:13,060
An arrow will get produced in the console, but that's perfectly fine.

39
00:03:13,390 --> 00:03:19,370
We're interested in inspecting the contents of the event object inside the object.

40
00:03:19,420 --> 00:03:21,730
We have the same properties as before.

41
00:03:22,030 --> 00:03:26,500
One significant difference is the absence of the data transfer object.

42
00:03:26,980 --> 00:03:28,840
This is not an error or a bug.

43
00:03:29,080 --> 00:03:34,450
The data transfer object is exposed if the event was triggered by a drag and drop event.

44
00:03:34,780 --> 00:03:37,210
This is why we get an error in the console.

45
00:03:37,450 --> 00:03:41,140
We can find the list of files under the target object.

46
00:03:43,600 --> 00:03:47,080
The target object refers to the input field element.

47
00:03:47,320 --> 00:03:50,140
It's what we attached the event listener to.

48
00:03:50,470 --> 00:03:55,120
The target will expose the list of files under a property called Files.

49
00:03:55,450 --> 00:03:59,230
It's the same object we worked with in the store file function.

50
00:03:59,560 --> 00:04:02,500
Hopefully, it's clear as to what we need to do.

51
00:04:03,040 --> 00:04:05,740
We'll need to make a small adjustment to our function.

52
00:04:06,010 --> 00:04:10,090
It should check if the data transfer property exists on the event.

53
00:04:10,420 --> 00:04:12,070
If it does, we'll use it.

54
00:04:12,400 --> 00:04:17,350
Otherwise, we'll ground the files from the target property back in the editor.

55
00:04:17,410 --> 00:04:19,750
We're going to remove the long statement.

56
00:04:22,200 --> 00:04:25,110
We don't need it anymore inside our function.

57
00:04:25,140 --> 00:04:30,900
We're going to modify the assignment to the final property instead of directly setting it to the data

58
00:04:30,900 --> 00:04:32,100
transfer object.

59
00:04:32,250 --> 00:04:34,260
We'll use a ternary operator.

60
00:04:35,470 --> 00:04:41,440
For the condition, we're going to check if the data transfer property is on the event object.

61
00:04:41,740 --> 00:04:46,330
In fact, we can copy this small portion of the line as the condition.

62
00:04:48,880 --> 00:04:52,780
This property is defined if the event was a drag and drop event.

63
00:04:53,050 --> 00:04:55,570
It won't exist if it's a different event.

64
00:04:55,900 --> 00:05:02,020
If this condition turns out to be true, the property will be set to the original value we had in the

65
00:05:02,020 --> 00:05:02,590
function.

66
00:05:05,190 --> 00:05:13,950
Otherwise, we'll send it to the following events Dot's target as a HTML input element files question

67
00:05:13,950 --> 00:05:14,340
mark.

68
00:05:14,430 --> 00:05:16,780
Dot Item zero No.

69
00:05:19,420 --> 00:05:20,680
There's a lot going on.

70
00:05:20,920 --> 00:05:22,000
Let's break it down.

71
00:05:22,330 --> 00:05:27,880
First, we're asserting the type of the target property to each HTML input element.

72
00:05:28,270 --> 00:05:33,280
This assertion is to prevent TypeScript from complaining about the property not existing.

73
00:05:33,640 --> 00:05:38,980
Next, we're calling the item function on the files property to grab the first file.

74
00:05:39,310 --> 00:05:45,440
Lastly, we're using the nolice coalescing operator to return null if we can't find a file.

75
00:05:46,000 --> 00:05:48,930
We won't need to make any further modifications.

76
00:05:49,210 --> 00:05:52,450
The files property is the same in both events.

77
00:05:52,690 --> 00:05:55,090
We shouldn't experience further issues.

78
00:05:55,360 --> 00:05:58,360
Let's try testing the uploader one more time.

79
00:06:01,000 --> 00:06:06,910
The upload will ultimately be a success, either upload will work in any order, we please.

80
00:06:07,150 --> 00:06:09,880
The console shouldn't produce errors, either.

81
00:06:10,240 --> 00:06:13,510
Creating a fallback solution is never a bad idea.

82
00:06:13,870 --> 00:06:17,140
You will always want to consider scenarios like this.