1 00:00:00,120 --> 00:00:06,900 In this lecture, we're going to begin uploading the screenshot to fire bases storage service, unlike 2 00:00:06,900 --> 00:00:09,570 the video, we don't have a file object. 3 00:00:09,810 --> 00:00:12,570 Luckily, Firebase is very flexible. 4 00:00:12,780 --> 00:00:15,210 Blobs are accepted by Firebase. 5 00:00:15,450 --> 00:00:22,890 To recap, a blob is an object that acts as a wrapper around a file's binary data as long as Firebase 6 00:00:22,890 --> 00:00:25,170 receives a file's binary data. 7 00:00:25,350 --> 00:00:26,820 It'll be able to store it. 8 00:00:27,330 --> 00:00:32,820 First, we need to create a function for converting our URLs back to blobs. 9 00:00:33,150 --> 00:00:36,810 The URLs created by our app are blob URLs. 10 00:00:37,110 --> 00:00:40,080 Long URLs point to our system's memory. 11 00:00:40,350 --> 00:00:44,010 We're allowed to access our files through these URLs. 12 00:00:44,400 --> 00:00:47,160 Let's create a function for handling this action. 13 00:00:47,460 --> 00:00:50,940 Open the FFmpeg service file in your editor. 14 00:00:53,460 --> 00:01:00,030 We're going to extract the logic for grabbing a blob through a URL in this service at the bottom of 15 00:01:00,030 --> 00:01:00,690 the class. 16 00:01:00,840 --> 00:01:05,040 Define an asynchronous function called blob from the URL. 17 00:01:07,600 --> 00:01:12,040 And the argument list, we're going to accept a string called Earl. 18 00:01:14,580 --> 00:01:20,610 Next, we can begin processing our URL, define a variable called response. 19 00:01:20,880 --> 00:01:24,480 Its value will be the fetch function with the URL. 20 00:01:27,050 --> 00:01:31,340 Normally we would run the fetch function with API URLs. 21 00:01:31,520 --> 00:01:36,110 However, it's completely acceptable to fetch a file from a blob. 22 00:01:36,440 --> 00:01:40,600 Modern browsers will understand the file is from the user's memory. 23 00:01:40,910 --> 00:01:46,550 As long as the URL is in the correct format, a request can be made for the file. 24 00:01:46,880 --> 00:01:49,160 Be sure to add the await keyword. 25 00:01:51,690 --> 00:01:54,750 Afterward, create a variable called Blob. 26 00:01:55,050 --> 00:02:00,420 Its value will be the response dot blob function with the await keyword. 27 00:02:03,020 --> 00:02:09,500 The fetch function returns a response object, which contains information on the response and headers. 28 00:02:09,800 --> 00:02:11,690 We're not interested in the headers. 29 00:02:11,930 --> 00:02:14,900 We can grab the file by running the blob function. 30 00:02:15,200 --> 00:02:17,840 The last step is to return the blob. 31 00:02:20,460 --> 00:02:24,180 The function we've defined will create a blob from a URL. 32 00:02:24,450 --> 00:02:30,240 It's important to understand the component does not have access to the blob object itself. 33 00:02:30,600 --> 00:02:32,400 It only has the URL. 34 00:02:32,730 --> 00:02:35,850 We need to create a function to grab the blob. 35 00:02:36,120 --> 00:02:40,440 Let's begin using our function in the upload component class file. 36 00:02:43,010 --> 00:02:45,680 Scroll down to the upload file function. 37 00:02:48,220 --> 00:02:51,670 We're going to add the async keyword to our function. 38 00:02:54,240 --> 00:02:57,630 The blob from the URL function is asynchronous. 39 00:02:57,840 --> 00:03:02,190 Therefore, our function should be asynchronous to next. 40 00:03:02,280 --> 00:03:04,680 Search for the clip path variable. 41 00:03:07,180 --> 00:03:10,520 We're going to grab the blob after defining this variable. 42 00:03:10,600 --> 00:03:18,370 But before we initiate and upload to Firebase after the variable create another variable called Screenshot 43 00:03:18,370 --> 00:03:27,100 Blob, its value will be the this dot FFmpeg service dot blob from URL function, with the selected 44 00:03:27,100 --> 00:03:29,110 screenshot property passed in. 45 00:03:31,730 --> 00:03:33,650 It is an asynchronous function. 46 00:03:33,860 --> 00:03:35,780 So add the await keyword. 47 00:03:38,310 --> 00:03:45,600 Next, we need to give our file a name, Firebase is going to ask us for a name during the upload process, 48 00:03:45,990 --> 00:03:48,930 create a variable called screenshot path. 49 00:03:49,230 --> 00:03:55,230 The value will be the following screenshots slash clip file name dot PNG. 50 00:03:58,100 --> 00:04:02,540 We're going to store our screenshots in a separate directory from our clips. 51 00:04:02,900 --> 00:04:06,110 The name of the directory will be called screenshots. 52 00:04:06,350 --> 00:04:12,290 Next, we're setting the name to the randomly generated I.D. with the PNG extension. 53 00:04:12,680 --> 00:04:13,910 Everything is in order. 54 00:04:14,030 --> 00:04:16,430 We can proceed to upload our file. 55 00:04:16,880 --> 00:04:19,490 Initializing the file upload should occur. 56 00:04:19,490 --> 00:04:24,170 After uploading the clip, Firebase can upload files in parallel. 57 00:04:24,380 --> 00:04:29,690 The order doesn't matter, but I prefer to upload the video first before a screenshots. 58 00:04:30,080 --> 00:04:32,120 Videos take longer to upload. 59 00:04:32,450 --> 00:04:40,610 Called the this storage Typekit upload function with the screenshot path and screenshot blob variables 60 00:04:40,610 --> 00:04:41,330 passed in. 61 00:04:43,970 --> 00:04:51,170 The value returned by this function will be an object called task, storing this object will be necessary. 62 00:04:51,470 --> 00:04:57,890 Otherwise, we won't be given updates on the status of the upload or are going to need this information 63 00:04:57,890 --> 00:05:00,590 before redirecting the user to their clip. 64 00:05:00,980 --> 00:05:03,260 Not doing so will cause issues. 65 00:05:03,500 --> 00:05:05,690 Scroll to the top of the class. 66 00:05:06,020 --> 00:05:09,950 Add a new optional property called Screenshot Task. 67 00:05:12,380 --> 00:05:16,700 It'll be annotated with the angular fire upload task class. 68 00:05:19,100 --> 00:05:22,340 Next, go back to the upload we've initiated. 69 00:05:22,640 --> 00:05:28,610 We're going to restore the value returned by the upload function to these screenshot task property. 70 00:05:31,140 --> 00:05:34,500 Before proceeding further, we should test our upload. 71 00:05:34,740 --> 00:05:40,170 Go ahead and upload a file, I want you to go through the entire upload process. 72 00:05:43,950 --> 00:05:47,670 After a few seconds, your upload should have been successful. 73 00:05:47,910 --> 00:05:52,770 Let's check out the Firebase console to verify the screenshot was uploaded. 74 00:05:53,190 --> 00:05:56,190 Open the Firebase console in another tab. 75 00:05:56,550 --> 00:05:59,790 Navigate to the dashboard for the storage service. 76 00:06:02,210 --> 00:06:06,740 Right away, we'll find these screenshots directory so far, so good. 77 00:06:07,010 --> 00:06:08,420 Let's take a look inside. 78 00:06:08,720 --> 00:06:10,400 There should be a single file. 79 00:06:10,580 --> 00:06:13,070 We can click on it to preview the image. 80 00:06:13,310 --> 00:06:14,750 Pat yourself on the back. 81 00:06:14,930 --> 00:06:21,590 After almost an hour of work, we've successfully generated a screenshot, presented it to the user 82 00:06:21,590 --> 00:06:23,630 and uploaded it to Firebase. 83 00:06:24,170 --> 00:06:27,020 There are a couple of refinements we'll need to make. 84 00:06:27,230 --> 00:06:30,650 Let's begin refining our solution in the next lecture.