1 00:00:02,020 --> 00:00:04,110 Now, let's get started by understanding 2 00:00:04,110 --> 00:00:07,760 what exactly makes up file uploads. 3 00:00:07,760 --> 00:00:11,790 And there actually are two involved parts here, 4 00:00:11,790 --> 00:00:14,470 two sites that are involved. 5 00:00:14,470 --> 00:00:16,510 And that's the client side 6 00:00:16,510 --> 00:00:18,750 and the backend, the server side. 7 00:00:18,750 --> 00:00:21,570 So the two sides, which are always involved 8 00:00:21,570 --> 00:00:24,420 with anything that happens on our website, 9 00:00:24,420 --> 00:00:26,443 as you can probably tell by now. 10 00:00:27,450 --> 00:00:29,660 But when it comes to file uploads, 11 00:00:29,660 --> 00:00:33,550 then it's the job of the client site to allow the user to 12 00:00:33,550 --> 00:00:35,490 select a file. 13 00:00:35,490 --> 00:00:38,350 Maybe we also want to show a preview there 14 00:00:38,350 --> 00:00:40,410 and we're going to see how that would work 15 00:00:40,410 --> 00:00:43,630 throughout the discourse section as well. 16 00:00:43,630 --> 00:00:44,870 And then of course, 17 00:00:44,870 --> 00:00:48,880 we need a way of submitting that selected file to the server 18 00:00:48,880 --> 00:00:51,290 to the backend so with that there, 19 00:00:51,290 --> 00:00:53,340 it can be stored. 20 00:00:53,340 --> 00:00:56,010 Because, of course, that's typically the goal. 21 00:00:56,010 --> 00:00:57,420 You are uploading a file 22 00:00:57,420 --> 00:00:59,767 so that it's getting stored on some servers. 23 00:00:59,767 --> 00:01:02,670 If you create a Facebook profile, 24 00:01:02,670 --> 00:01:05,750 then you probably upload an image of yourself 25 00:01:05,750 --> 00:01:09,450 and that image gets stored on Facebook's servers 26 00:01:09,450 --> 00:01:12,410 so that it can then be shown to all your friends 27 00:01:12,410 --> 00:01:14,780 who might visit your profile. 28 00:01:14,780 --> 00:01:16,920 So that is then what we'll do on the backend. 29 00:01:16,920 --> 00:01:19,430 What do we have to do on the server side? 30 00:01:19,430 --> 00:01:22,000 We need to take that incoming file 31 00:01:22,000 --> 00:01:24,160 and we need some way of extracting it 32 00:01:24,160 --> 00:01:26,200 from the incoming request. 33 00:01:26,200 --> 00:01:30,450 Just like we extract other data from the incoming request. 34 00:01:30,450 --> 00:01:34,300 Maybe it's also file combined with some other data 35 00:01:34,300 --> 00:01:36,410 like your username. 36 00:01:36,410 --> 00:01:39,800 And then we need to store that file on the backend. 37 00:01:39,800 --> 00:01:42,170 And if that's the goal, we also need a way 38 00:01:42,170 --> 00:01:44,690 of making it available to the public again. 39 00:01:44,690 --> 00:01:46,853 So that we can serve it to the public. 40 00:01:47,750 --> 00:01:51,120 These are the two sides that are involved and we're going to 41 00:01:51,120 --> 00:01:54,640 go through these different steps and we'll have a look at 42 00:01:54,640 --> 00:01:57,835 these different aspects throughout this section, 43 00:01:57,835 --> 00:02:00,380 starting with the client side 44 00:02:00,380 --> 00:02:02,170 and with an enabling users 45 00:02:02,170 --> 00:02:04,273 to pick a file in the first place. 46 00:02:05,382 --> 00:02:06,890 Now, for all of that, 47 00:02:06,890 --> 00:02:10,172 I got a very simple dummy demo project for you, 48 00:02:10,172 --> 00:02:13,230 which you find attached. 49 00:02:13,230 --> 00:02:17,330 Attached, you simply find a zip file with a dummy project, 50 00:02:17,330 --> 00:02:20,984 a node express project, where we got two views, 51 00:02:20,984 --> 00:02:24,340 a couple of routes for rendering these views, 52 00:02:24,340 --> 00:02:27,773 nothing too fancy there. And then some dummy styles. 53 00:02:28,680 --> 00:02:32,650 I also got a data folder with some code about establishing a 54 00:02:32,650 --> 00:02:35,600 database connection to a Mongo DB database. 55 00:02:35,600 --> 00:02:39,520 And here I'm basically just implementing again what I showed 56 00:02:39,520 --> 00:02:41,970 you in the last course section. 57 00:02:41,970 --> 00:02:43,530 So if you skipped that section, 58 00:02:43,530 --> 00:02:46,960 you might want to revisit it at least have a look at the 59 00:02:46,960 --> 00:02:48,660 beginning of the last section, 60 00:02:48,660 --> 00:02:51,650 so that you'll learn how you can establish a connection to 61 00:02:51,650 --> 00:02:54,340 Mongo DB with node JS, 62 00:02:54,340 --> 00:02:57,980 though, I'm giving that connection code to you here. 63 00:02:57,980 --> 00:02:58,813 Nonetheless, 64 00:02:58,813 --> 00:03:02,270 you need to that you got a running Mongo DB server on your 65 00:03:02,270 --> 00:03:04,210 system if you want to follow along 66 00:03:04,210 --> 00:03:07,160 since this dummy project I'm giving to you here 67 00:03:07,160 --> 00:03:09,203 will connect to such a server. 68 00:03:10,810 --> 00:03:15,150 Well, and then you can just extract that attached project 69 00:03:15,150 --> 00:03:18,140 and as always, run NPM install 70 00:03:18,140 --> 00:03:20,860 to install all the dependencies that are needed. 71 00:03:20,860 --> 00:03:22,430 And then with NPM start, 72 00:03:22,430 --> 00:03:24,974 you can start that server, that web server, 73 00:03:24,974 --> 00:03:28,390 which listens on port 3000, 74 00:03:28,390 --> 00:03:31,010 as you can see an app JS, and therefore, 75 00:03:31,010 --> 00:03:34,240 you can visit local host 3000 to see this dummy 76 00:03:34,240 --> 00:03:37,460 page on which we're going to work throughout the discourse 77 00:03:37,460 --> 00:03:38,293 section.