1 00:00:02,320 --> 00:00:05,630 So how can we output the user data? 2 00:00:05,630 --> 00:00:09,333 How can we output a list of users here on the starting page? 3 00:00:10,580 --> 00:00:13,220 Well, in the route that is responsible 4 00:00:13,220 --> 00:00:16,030 for rendering this page, this route here, 5 00:00:16,030 --> 00:00:19,223 we want to fetch all the user data from the database. 6 00:00:20,150 --> 00:00:21,790 So for this here, we can again, 7 00:00:21,790 --> 00:00:26,281 get access to the database then to the users collection, 8 00:00:26,281 --> 00:00:29,400 which is where the user data is stored. 9 00:00:29,400 --> 00:00:34,400 And then with find to Array, we can find all the documents 10 00:00:34,680 --> 00:00:37,615 without restrictions, without any filtering, 11 00:00:37,615 --> 00:00:40,595 and then get an Array of all that data 12 00:00:40,595 --> 00:00:44,270 with which we can work here in JavaScript. 13 00:00:44,270 --> 00:00:47,170 That's what we did in the previous course section as well. 14 00:00:48,090 --> 00:00:49,950 Now this is an asynchronous task, 15 00:00:49,950 --> 00:00:52,790 so we handle it with async await. 16 00:00:52,790 --> 00:00:55,413 And ultimately with that, we'll get our users. 17 00:00:57,140 --> 00:01:00,141 Now we can pass the users here, 18 00:01:00,141 --> 00:01:03,403 to profiles to this template. 19 00:01:04,900 --> 00:01:09,900 And hence in the template, in the profiles.ejs file here, 20 00:01:10,045 --> 00:01:12,970 we can now output this list item 21 00:01:12,970 --> 00:01:15,593 dynamically with help of EJS. 22 00:01:17,000 --> 00:01:20,010 So as we did it before in the course, 23 00:01:20,010 --> 00:01:23,500 we can create a four-off loop to loop through 24 00:01:23,500 --> 00:01:27,640 all the users, all of the users key here. 25 00:01:27,640 --> 00:01:31,623 So that key, I'm making available to the template here. 26 00:01:33,338 --> 00:01:36,220 And we have an opening curly brace here. 27 00:01:36,220 --> 00:01:39,010 And then after the list item closing tag, 28 00:01:39,010 --> 00:01:44,010 we have the closing curly brace with our EJS syntax. 29 00:01:44,780 --> 00:01:48,243 And that will now repeat this list item for all the users. 30 00:01:49,530 --> 00:01:53,990 That means that here, we can actually output user.name 31 00:01:53,990 --> 00:01:58,550 to outputs the concrete user name. And here for the source, 32 00:01:58,550 --> 00:02:01,310 we now want to output the user image, 33 00:02:01,310 --> 00:02:04,410 and that should be the path of the image that we stored. 34 00:02:04,410 --> 00:02:08,070 So this imagePath value, because that's the path 35 00:02:08,070 --> 00:02:09,746 to the image on our server, 36 00:02:09,746 --> 00:02:12,333 and that's exactly what I want to show here. 37 00:02:13,500 --> 00:02:17,983 So here that's user.imagePath, like this. 38 00:02:20,910 --> 00:02:24,281 With that, if we save this and we reload, 39 00:02:24,281 --> 00:02:28,183 we see Maximillian, but the image is still missing. 40 00:02:29,082 --> 00:02:31,940 And maybe you already know why it's missing, 41 00:02:31,940 --> 00:02:35,600 but in case you don't, let's open up the developer tools. 42 00:02:35,600 --> 00:02:39,250 And here in the console, we see an error message 43 00:02:39,250 --> 00:02:43,290 that the server responded with a status of 404. 44 00:02:43,290 --> 00:02:45,863 So it didn't find that file. 45 00:02:46,947 --> 00:02:50,850 Now the file clearly is stored here. 46 00:02:50,850 --> 00:02:53,641 We do have the images here, 47 00:02:53,641 --> 00:02:56,650 but the reason why it's not found is that we're not 48 00:02:56,650 --> 00:03:01,650 serving content from that images folder to our users. 49 00:03:01,970 --> 00:03:04,668 Keep in mind, by default users can't 50 00:03:04,668 --> 00:03:07,210 access your server-side files. 51 00:03:07,210 --> 00:03:09,100 It would be pretty bad if they could. 52 00:03:09,100 --> 00:03:12,310 That would be a huge security issue. 53 00:03:12,310 --> 00:03:14,768 So by default, your files on the server, 54 00:03:14,768 --> 00:03:18,095 all your files in all your sub folders 55 00:03:18,095 --> 00:03:22,520 are not accessible by your website visitors. 56 00:03:22,520 --> 00:03:26,241 They execute on the server and your visitors only see 57 00:03:26,241 --> 00:03:30,293 the content of the files you are sending back to them. 58 00:03:31,280 --> 00:03:33,698 And you send back content by using 59 00:03:33,698 --> 00:03:36,234 the render method here, for example, 60 00:03:36,234 --> 00:03:41,234 or in app.js by using this static middleware. 61 00:03:41,600 --> 00:03:43,440 You might remember this middleware 62 00:03:43,440 --> 00:03:45,893 from way early in the course. 63 00:03:46,810 --> 00:03:50,650 When I introduced you to templates and static files, 64 00:03:50,650 --> 00:03:53,160 I mentioned that with this middleware, 65 00:03:53,160 --> 00:03:56,300 we can make the content of a folder available 66 00:03:56,300 --> 00:04:01,300 to our users so that they can directly request those files. 67 00:04:01,540 --> 00:04:05,710 And that was required for CSS or JavaScript files 68 00:04:05,710 --> 00:04:08,830 or images that we might have on our website. 69 00:04:08,830 --> 00:04:11,960 So that when a website requests a CSS file, 70 00:04:11,960 --> 00:04:15,893 because we link to it, for example, that file can be served. 71 00:04:16,800 --> 00:04:19,250 And now we have exactly that scenario 72 00:04:19,250 --> 00:04:20,779 for the uploaded images. 73 00:04:20,779 --> 00:04:23,850 We want to serve them statically. 74 00:04:23,850 --> 00:04:27,745 If a file is requested, like it is here, 75 00:04:27,745 --> 00:04:30,450 because here we got an image element 76 00:04:30,450 --> 00:04:34,820 that is requesting this file that file should be served to 77 00:04:34,820 --> 00:04:37,230 the user who is requesting the file. 78 00:04:37,230 --> 00:04:40,163 So the user who is visiting this page. 79 00:04:41,990 --> 00:04:44,246 And hence, what I want to do here 80 00:04:44,246 --> 00:04:49,170 is I want to register express.static again. 81 00:04:49,170 --> 00:04:52,156 This time, all the 40 images folder, 82 00:04:52,156 --> 00:04:56,630 so that I don't just serve the public folder statically, 83 00:04:56,630 --> 00:04:58,543 but also the images folder. 84 00:04:59,520 --> 00:05:03,060 So now all the content in the images folder can also 85 00:05:03,060 --> 00:05:06,110 directly be accessed by my visitors. 86 00:05:06,110 --> 00:05:09,430 They won't be able to change or delete or do anything 87 00:05:09,430 --> 00:05:11,540 with it, but they can view it. 88 00:05:11,540 --> 00:05:13,303 And that's the important part here. 89 00:05:14,920 --> 00:05:16,630 So by adding this middleware, 90 00:05:16,630 --> 00:05:19,710 if you save that and you reload you're 91 00:05:19,710 --> 00:05:23,120 one step closer to the desired goal. 92 00:05:23,120 --> 00:05:25,580 But it still doesn't work here. 93 00:05:25,580 --> 00:05:27,930 And the reason for it not working here 94 00:05:27,930 --> 00:05:30,420 can be a bit tricky to see. 95 00:05:30,420 --> 00:05:32,650 In the end, what we're doing here is we are 96 00:05:32,650 --> 00:05:35,007 requesting a "slash" images 97 00:05:35,007 --> 00:05:38,333 "slash" file name, URL path. 98 00:05:39,780 --> 00:05:42,410 Now we're making images available here, 99 00:05:42,410 --> 00:05:45,520 but actually that means that all the content 100 00:05:45,520 --> 00:05:47,810 in there can be requested like this. 101 00:05:47,810 --> 00:05:50,062 It does not mean that you have 102 00:05:50,062 --> 00:05:52,440 to request "slash" images "slash" something, 103 00:05:52,440 --> 00:05:56,710 but just to direct the something that sits in the file. 104 00:05:56,710 --> 00:05:58,810 That's we also did for public. 105 00:05:58,810 --> 00:06:02,436 If you have a look at the templates at the CSS files, 106 00:06:02,436 --> 00:06:07,230 you see I'm requesting "slash" styles "slash" base.css 107 00:06:07,230 --> 00:06:11,030 because in the public folder, I have a styles sub folder, 108 00:06:11,030 --> 00:06:13,350 which contains base.css. 109 00:06:13,350 --> 00:06:18,350 I'm not requesting "slash" public "slash" styles here. 110 00:06:19,000 --> 00:06:22,060 So the folder name of the folder 111 00:06:22,060 --> 00:06:24,640 which has the content that's made available 112 00:06:24,640 --> 00:06:28,843 statically is not part of that link here. 113 00:06:30,000 --> 00:06:35,000 And therefore, actually we should not request "slash" images 114 00:06:35,057 --> 00:06:38,403 "slash" file name, but the file name itself. 115 00:06:39,930 --> 00:06:41,900 However, that's not a must-do. 116 00:06:41,900 --> 00:06:44,800 We can also configure this static middleware 117 00:06:44,800 --> 00:06:47,327 such that we actually can request 118 00:06:47,327 --> 00:06:49,993 "slash" images "slash" image name. 119 00:06:50,960 --> 00:06:54,107 All we have to do for that is add a path here 120 00:06:54,107 --> 00:06:57,523 "slash" images, and then add our middleware. 121 00:06:58,430 --> 00:07:01,290 We can use a path filter on 122 00:07:01,290 --> 00:07:04,649 the use method middlewares here as well. 123 00:07:04,649 --> 00:07:06,930 That means that this middleware 124 00:07:06,930 --> 00:07:11,169 will now only become active if a request reaches the server 125 00:07:11,169 --> 00:07:15,910 that has a path that starts with "slash" images. 126 00:07:15,910 --> 00:07:18,360 So it can be more than "slash" images, 127 00:07:18,360 --> 00:07:21,940 but it has to start with "slash" images. 128 00:07:21,940 --> 00:07:23,583 Other requests would be ignored. 129 00:07:25,110 --> 00:07:27,330 That means that now if we have a request 130 00:07:27,330 --> 00:07:30,100 for a "slash" images "slash" image name, 131 00:07:30,100 --> 00:07:32,420 then this middleware would become active, 132 00:07:32,420 --> 00:07:34,972 and then this request should work 133 00:07:34,972 --> 00:07:37,890 as it's set up in our template. 134 00:07:37,890 --> 00:07:41,800 Now, the reason for this working now is simply 135 00:07:41,800 --> 00:07:43,762 that if you add such a filter here, 136 00:07:43,762 --> 00:07:47,190 like in this case where I'm filtering for requests 137 00:07:47,190 --> 00:07:49,470 that start with "slash" images, 138 00:07:49,470 --> 00:07:52,056 then the path for which you are filtering, 139 00:07:52,056 --> 00:07:56,239 so "slash" images here, is removed from 140 00:07:56,239 --> 00:07:59,460 the incoming request path. 141 00:07:59,460 --> 00:08:02,530 So if originally the browser is sent the request 142 00:08:02,530 --> 00:08:05,700 for "slash" images "slash" max JPEG. 143 00:08:05,700 --> 00:08:10,700 Now it's just four "slash" max JPEG without "slash" images. 144 00:08:11,310 --> 00:08:14,530 And that then is found in the images folder, 145 00:08:14,530 --> 00:08:17,420 and hence this file can be served to the client, 146 00:08:17,420 --> 00:08:19,260 so to the browser. 147 00:08:19,260 --> 00:08:22,613 So if we save this here with this adjustment made, 148 00:08:22,613 --> 00:08:25,393 if we reload, here's my image. 149 00:08:26,380 --> 00:08:28,320 So I hope it's clear what we did here, 150 00:08:28,320 --> 00:08:31,552 which basically just make sure that now unlike before 151 00:08:31,552 --> 00:08:35,750 the "slash" images "slash," before the file name 152 00:08:35,750 --> 00:08:37,712 is not a problem anymore. 153 00:08:38,630 --> 00:08:42,000 The alternative would have been to not do it like this, 154 00:08:42,000 --> 00:08:44,250 and instead, make sure that we actually 155 00:08:44,250 --> 00:08:48,180 output just the file name here instead of the image path 156 00:08:48,180 --> 00:08:50,513 that includes the folder name as well. 157 00:08:51,760 --> 00:08:54,323 So now with that, this is working 158 00:08:54,323 --> 00:08:58,710 and now we got a basic form of file upload, 159 00:08:58,710 --> 00:09:01,963 file storage and file serving implemented.