1
00:00:00,390 --> 00:00:04,890
In this lecture, the objective is to upload the file to Firebase.

2
00:00:05,220 --> 00:00:09,360
Firebase offers a service for hosting uploaded files from users.

3
00:00:09,690 --> 00:00:15,900
It's absolutely free to get started if you find yourself needing more storage, you can always upgrade

4
00:00:15,900 --> 00:00:18,730
to a premium plan for our project.

5
00:00:18,810 --> 00:00:22,050
The free version will be enough by default.

6
00:00:22,320 --> 00:00:24,810
This service is enabled for our project.

7
00:00:25,200 --> 00:00:26,880
We can get started right away.

8
00:00:27,180 --> 00:00:31,860
We are using the angular fire package to help us communicate with Firebase.

9
00:00:32,250 --> 00:00:38,100
It comes with a module that export services for interacting with Firebase Cloud storage.

10
00:00:38,730 --> 00:00:43,620
We're going to need to import this module into our app and your editor.

11
00:00:43,710 --> 00:00:45,870
Open the app module file.

12
00:00:48,330 --> 00:00:56,670
Next, import the angular fire storage module from the angular slash fire slash compat slash storage

13
00:00:56,670 --> 00:00:57,300
package.

14
00:00:59,820 --> 00:01:03,480
Lastly, we can add this module to the imports array.

15
00:01:06,150 --> 00:01:12,930
We're ready to start uploading files, switch over to the upload component class after importing this

16
00:01:12,930 --> 00:01:18,770
module, we can inject one of its services to upload a file at the top of the file.

17
00:01:18,780 --> 00:01:25,230
We will import the angular via storage service from the angular slash forms package.

18
00:01:27,650 --> 00:01:33,170
Next, in the constructor function in Jet, this service with the name storage.

19
00:01:35,690 --> 00:01:37,400
The service should be private.

20
00:01:37,700 --> 00:01:41,360
We don't need to access these storage methods from the template.

21
00:01:41,690 --> 00:01:47,030
Let's begin using this service to initiate and upload in the upload function.

22
00:01:47,150 --> 00:01:50,570
We are going to create a variable to point to the file.

23
00:01:51,050 --> 00:01:53,600
Define a variable called clip path.

24
00:01:53,870 --> 00:02:00,050
Its value will be the following clips slash this dot file dot name.

25
00:02:02,760 --> 00:02:06,000
File organizations should always be a top priority.

26
00:02:06,210 --> 00:02:09,570
We're not going to directly store the file in the storage.

27
00:02:09,780 --> 00:02:13,680
We will allocate clips to a specific folder called clips.

28
00:02:14,070 --> 00:02:16,410
This step is optional but recommended.

29
00:02:16,680 --> 00:02:21,990
If a directory doesn't exist within the storage service, Firebase will create it for you.

30
00:02:22,260 --> 00:02:28,830
Alternatively, we have the option of creating the folder manually in the Firebase console will let

31
00:02:28,830 --> 00:02:30,210
Firebase handle it.

32
00:02:30,780 --> 00:02:35,940
There's one problem with the path you may be tempted to use the file name in the path.

33
00:02:36,210 --> 00:02:38,580
However, that introduces headaches.

34
00:02:38,910 --> 00:02:41,820
Firebase does not check for duplicate files.

35
00:02:42,090 --> 00:02:48,390
If one user uploads a file with the same name, the second file would override the first file.

36
00:02:48,630 --> 00:02:51,360
Conflicting file names can cause issues.

37
00:02:51,900 --> 00:02:55,200
Firebase does not provide a solution out of the box.

38
00:02:55,440 --> 00:02:57,810
It's up to us to implement a solution.

39
00:02:58,140 --> 00:03:00,750
There are different ways to tackle this issue.

40
00:03:01,080 --> 00:03:05,490
I think the easiest solution would be to generate a unique file name.

41
00:03:05,850 --> 00:03:11,390
In the resource section of this lecture, I provide a link to a package called UID.

42
00:03:14,350 --> 00:03:21,460
The EU aid package exports a set of functions for generating a unique ID rather than generating the

43
00:03:21,460 --> 00:03:22,660
ID ourselves.

44
00:03:22,690 --> 00:03:26,260
We will outsource this action to a third party package.

45
00:03:26,620 --> 00:03:29,020
It's super simple to use and install.

46
00:03:29,320 --> 00:03:30,490
Let's give it a try.

47
00:03:30,790 --> 00:03:32,710
First, we need to install it.

48
00:03:33,010 --> 00:03:34,720
Switch over to the command line.

49
00:03:34,990 --> 00:03:42,430
Run the following command 21:00 i you.you ID at type's slash you.you ID.

50
00:03:45,250 --> 00:03:48,060
We're installing two packages first.

51
00:03:48,100 --> 00:03:54,640
We're installing the you.You ID package, the second package contains Typekit for the functions defined

52
00:03:54,640 --> 00:03:56,530
by the UUA ID package.

53
00:03:56,890 --> 00:04:01,600
It's always considered good practice to download packages that have type support.

54
00:04:01,930 --> 00:04:05,290
Otherwise, we may encounter issues with type scripts.

55
00:04:05,650 --> 00:04:11,550
It's an optional package to download, but recommend it back in the upload component class.

56
00:04:11,590 --> 00:04:15,970
Let's import the V for function from the you.You ID package.

57
00:04:18,470 --> 00:04:20,510
I'm not a fan of the name for the function.

58
00:04:20,720 --> 00:04:22,550
Let's create an alias for it.

59
00:04:22,790 --> 00:04:25,060
The alias will be called ID.

60
00:04:27,860 --> 00:04:35,270
Next, scroll down to the upload application above the clip path variable defined a variable called

61
00:04:35,270 --> 00:04:38,930
clip file name assigned to the you.You ID function.

62
00:04:41,520 --> 00:04:44,580
This function will always return a random, unique ID.

63
00:04:45,180 --> 00:04:50,250
Let's replace the file name property with the file name variable.

64
00:04:50,580 --> 00:04:54,720
In addition to the ID, we will need to have fixed the file extension.

65
00:04:55,050 --> 00:04:57,750
The extension is called MP for.

66
00:05:00,380 --> 00:05:04,550
We can proceed to upload the file after the path variable.

67
00:05:04,730 --> 00:05:09,710
We will call the following function this dot storage dot upload.

68
00:05:12,250 --> 00:05:15,670
As you might suspect, this function will upload a file.

69
00:05:15,940 --> 00:05:17,590
It has two arguments.

70
00:05:17,950 --> 00:05:23,680
The first argument is the name of the file we can pass in our clip path variable.

71
00:05:24,130 --> 00:05:27,580
It's perfectly acceptable to add the path in the file name.

72
00:05:27,910 --> 00:05:33,370
Firebase will understand we want to store the file in a subdirectory called clips.

73
00:05:33,790 --> 00:05:36,460
The second argument is the file object.

74
00:05:36,760 --> 00:05:39,910
Let's pass in the Vestact file property.

75
00:05:42,460 --> 00:05:48,520
This function will initialize the upload process we're finished with writing the code for uploading

76
00:05:48,520 --> 00:05:50,110
a file to Firebase.

77
00:05:50,380 --> 00:05:53,680
Let's try giving things a test in the application.

78
00:05:53,860 --> 00:05:58,810
Try uploading an AMP for file when you're on the second step in the form.

79
00:05:58,870 --> 00:06:01,420
Press submit to initiate the upload.

80
00:06:03,910 --> 00:06:09,040
We can't verify if the file was uploaded because we haven't handled the response.

81
00:06:09,370 --> 00:06:11,830
We'll take care of that in another lecture.

82
00:06:12,100 --> 00:06:15,970
Let's verify the file was uploaded by viewing the console.

83
00:06:16,300 --> 00:06:19,150
Open the Firebase console in your browser.

84
00:06:21,670 --> 00:06:28,120
On the sidebar, navigate to storage, if you're already on this page, you will need to refresh the

85
00:06:28,120 --> 00:06:31,120
page to view the files uploaded to the bucket.

86
00:06:33,640 --> 00:06:34,080
Great.

87
00:06:34,330 --> 00:06:37,750
The files have been successfully uploaded to Firebase.

88
00:06:38,080 --> 00:06:42,790
If you upload a file that's not an MP for, you shouldn't see it in the storage.

89
00:06:43,120 --> 00:06:45,160
We're finished with uploading the file.

90
00:06:45,400 --> 00:06:48,790
The user doesn't know if the upload was a success or not.

91
00:06:49,060 --> 00:06:53,260
In the next couple of lectures will work on handling the response.