1
00:00:00,240 --> 00:00:04,380
In this section, we're going to take the next step to develop our application.

2
00:00:04,680 --> 00:00:09,300
We will enable users to upload videos to share with others on the application.

3
00:00:09,720 --> 00:00:14,400
Uploading files is a shared responsibility between the client and the server.

4
00:00:15,000 --> 00:00:19,080
We must take the time to understand what each side is responsible for.

5
00:00:19,470 --> 00:00:23,220
Our job as front end developers is to send the file to the server.

6
00:00:23,550 --> 00:00:26,040
The server performs the majority of the work.

7
00:00:26,400 --> 00:00:30,570
File validation is an example of an action performed by the server.

8
00:00:30,960 --> 00:00:33,570
It is possible to spoof file extensions.

9
00:00:33,780 --> 00:00:38,130
Servers should be able to validate the file type before storing the file.

10
00:00:38,700 --> 00:00:43,620
In addition, servers are responsible for managing the uploads in the file system.

11
00:00:43,950 --> 00:00:47,670
A specific location should be allocated for user uploads.

12
00:00:48,030 --> 00:00:50,610
File permissions are another job for servers.

13
00:00:50,880 --> 00:00:57,870
It's an optional step, but recommended some files should be limited to a few select authorized users.

14
00:00:58,440 --> 00:01:04,980
Lastly, the server is responsible for exposing an API that the client can use to upload files.

15
00:01:05,280 --> 00:01:09,090
The client is responsible for presenting the file to the user.

16
00:01:09,540 --> 00:01:15,840
This presentation can be in the form of an image, direct link or, in our case, a video player.

17
00:01:16,200 --> 00:01:19,140
We are using Firebase as our backend solution.

18
00:01:19,500 --> 00:01:23,700
Fortunately, it comes with everything we'll need to handle file uploads.

19
00:01:24,000 --> 00:01:26,340
This service will save us a lot of time.

20
00:01:27,670 --> 00:01:32,560
Uploading files in JavaScript is completely optional for this course.

21
00:01:32,680 --> 00:01:35,740
We will be handling the forms submission with JavaScript.

22
00:01:36,100 --> 00:01:38,200
There are many benefits to doing so.

23
00:01:38,470 --> 00:01:41,830
We will have complete control over the user experience.

24
00:01:42,100 --> 00:01:46,480
Most importantly, the page will not refresh during the upload process.

25
00:01:47,140 --> 00:01:50,050
Let's check out the upload page in our app.

26
00:01:50,410 --> 00:01:54,760
The UI for uploading is very different from the pure HTML solution.

27
00:01:55,180 --> 00:01:59,390
Uploading the file will be a two step process from the beginning.

28
00:01:59,410 --> 00:02:01,930
We will ask the user to upload a file.

29
00:02:02,290 --> 00:02:08,940
If files are dropped on the Dropbox, it'll initiate the upload process inside the Dropbox.

30
00:02:08,979 --> 00:02:15,370
We will render an icon to indicate the progress of the upload after they've uploaded a file.

31
00:02:15,400 --> 00:02:17,740
We will present them with two options.

32
00:02:18,010 --> 00:02:23,830
We will ask them to select a screenshot generated by us and to add a title to the clip.

33
00:02:24,250 --> 00:02:29,590
Implementing the solution will be a behemoth of a task, but nothing we can't handle.

34
00:02:30,100 --> 00:02:33,010
I'll walk you through every step of setting this up.

35
00:02:33,310 --> 00:02:39,700
Alternatively, we may need to provide a more fundamental solution because not every user can drag and

36
00:02:39,700 --> 00:02:40,960
drop backward.

37
00:02:40,960 --> 00:02:43,360
Compatibility is something we should consider.

38
00:02:43,720 --> 00:02:46,450
I'll show you how to deal with that in this section.

39
00:02:47,080 --> 00:02:49,900
Firebase is our solution for a back end.

40
00:02:50,170 --> 00:02:53,230
We've used it for storing the user's data so far.

41
00:02:53,530 --> 00:02:56,170
It comes with a feature called Cloud Storage.

42
00:02:56,470 --> 00:03:00,100
This service provides hosting for user generated content.

43
00:03:00,400 --> 00:03:03,670
We're going to use it to store the user's file uploads.

44
00:03:04,000 --> 00:03:08,020
We'll revisit it later in this section before moving on.

45
00:03:08,140 --> 00:03:12,250
I highly recommend opening two files for the remainder of this section.

46
00:03:12,520 --> 00:03:16,900
We will be spending a lot of time on the upload templates and class files.

47
00:03:17,230 --> 00:03:20,470
You should always keep these two files open in your editor.

48
00:03:20,710 --> 00:03:23,650
When you're ready, I'll see you in the following lecture.