1 00:00:00,960 --> 00:00:02,770 ‫Let's now, just very quickly, 2 00:00:02,770 --> 00:00:05,560 ‫save the actual name of the uploaded image 3 00:00:05,560 --> 00:00:08,783 ‫to the corresponding updated user document. 4 00:00:10,490 --> 00:00:12,960 ‫And doing that is actually pretty simple. 5 00:00:12,960 --> 00:00:16,330 ‫So let's go here to the update me middleware, 6 00:00:16,330 --> 00:00:19,640 ‫and the data that gets updated is here stored 7 00:00:19,640 --> 00:00:22,310 ‫in this filtered body object, right? 8 00:00:22,310 --> 00:00:25,010 ‫And remember that this object here 9 00:00:25,010 --> 00:00:29,090 ‫is the result of filtering the request.body, 10 00:00:29,090 --> 00:00:32,900 ‫leaving only the name and the email, right? 11 00:00:32,900 --> 00:00:37,010 ‫Now, adding the photo to that as well is really simple. 12 00:00:37,010 --> 00:00:39,680 ‫All we have to do is something like this. 13 00:00:39,680 --> 00:00:44,110 ‫So, if there is request.file, 14 00:00:44,110 --> 00:00:48,610 ‫well then, filteredBody.photo, 15 00:00:48,610 --> 00:00:50,670 ‫which remember, is the name of the field 16 00:00:50,670 --> 00:00:55,670 ‫which holds the photo, is going to be equal to request.file, 17 00:00:56,710 --> 00:00:59,260 ‫and then it is .filename. 18 00:00:59,260 --> 00:01:01,780 ‫So what we have here, right? 19 00:01:01,780 --> 00:01:04,760 ‫Remember, that we only really store the image name 20 00:01:04,760 --> 00:01:08,100 ‫to our documents, and not the entire path to the image. 21 00:01:08,100 --> 00:01:10,810 ‫And so that's exactly what we want here. 22 00:01:10,810 --> 00:01:14,470 ‫So, the file name, all right? 23 00:01:14,470 --> 00:01:18,800 ‫So, give it a save, and let's try it here. 24 00:01:18,800 --> 00:01:21,913 ‫Also, we can now get rid of these console.logs here. 25 00:01:24,820 --> 00:01:28,610 ‫All right, and, so I hope this line of code here 26 00:01:28,610 --> 00:01:31,240 ‫made sense to you, but I believe it does. 27 00:01:31,240 --> 00:01:34,650 ‫So really, all we're doing, is to add the photo property 28 00:01:34,650 --> 00:01:37,810 ‫to the object that is going to be updated here. 29 00:01:37,810 --> 00:01:39,750 ‫And that photo property is, of course, 30 00:01:39,750 --> 00:01:42,573 ‫equal to the file's filename. 31 00:01:43,720 --> 00:01:47,660 ‫Okay, so let's try it here one more time. 32 00:01:47,660 --> 00:01:50,373 ‫And now back to the original image, 33 00:01:53,240 --> 00:01:54,763 ‫which is this one. 34 00:01:56,090 --> 00:01:59,770 ‫So, open, send, and indeed, 35 00:01:59,770 --> 00:02:01,853 ‫now we've got the correct filename. 36 00:02:02,740 --> 00:02:06,450 ‫Okay, so that really works now. 37 00:02:06,450 --> 00:02:08,490 ‫And now, just one small detail 38 00:02:08,490 --> 00:02:10,340 ‫that we didn't talk about before. 39 00:02:10,340 --> 00:02:13,830 ‫So, what happens when we create a new user? 40 00:02:13,830 --> 00:02:16,750 ‫They will not have any photo in the beginning, right? 41 00:02:16,750 --> 00:02:19,422 ‫And so let's actually change that. 42 00:02:19,422 --> 00:02:23,780 ‫Oka, and for that we have a default image here, 43 00:02:23,780 --> 00:02:26,083 ‫which is basically going to be this one. 44 00:02:27,380 --> 00:02:30,543 ‫So, let's go to the user model. 45 00:02:31,920 --> 00:02:35,410 ‫So, in a long time we haven't touched that one. 46 00:02:35,410 --> 00:02:40,410 ‫And so here, in the photo, let's now define a default, okay. 47 00:02:40,550 --> 00:02:44,893 ‫So here we need to create an object. 48 00:02:49,280 --> 00:02:53,583 ‫And now the default we want to be default.jpg. 49 00:02:56,505 --> 00:03:00,733 ‫All right, this would be on a new line, and this as well. 50 00:03:02,400 --> 00:03:05,490 ‫All right, and, so now let's actually go ahead 51 00:03:05,490 --> 00:03:07,840 ‫and create a new user. 52 00:03:07,840 --> 00:03:08,923 ‫So, sign up. 53 00:03:11,730 --> 00:03:13,463 ‫And I'm calling her Monica. 54 00:03:15,300 --> 00:03:20,300 ‫And, with the email of Monica@example.com. 55 00:03:23,220 --> 00:03:25,770 ‫Just like all the others, okay. 56 00:03:25,770 --> 00:03:27,620 ‫And still with the standard password. 57 00:03:29,660 --> 00:03:32,510 ‫Okay, and now let's actually go ahead and log 58 00:03:32,510 --> 00:03:36,813 ‫into our web application using this newly created user. 59 00:03:38,800 --> 00:03:41,333 ‫So, let's log out Laura here, 60 00:03:42,380 --> 00:03:47,380 ‫and log in as Monica with test one, two, three, four. 61 00:03:51,050 --> 00:03:52,560 ‫Let's try that password again. 62 00:03:52,560 --> 00:03:54,523 ‫Test one, two, three, four. 63 00:03:56,550 --> 00:03:58,430 ‫And, that's still not working. 64 00:03:58,430 --> 00:04:01,920 ‫Let's see, maybe we actually gave her another password. 65 00:04:01,920 --> 00:04:04,743 ‫Oh, okay, it's pass one, two, three, four. 66 00:04:05,620 --> 00:04:09,390 ‫So, stupid mistake here. 67 00:04:09,390 --> 00:04:13,100 ‫So pass one, two, three, four, login. 68 00:04:13,100 --> 00:04:17,400 ‫Okay, now it worked, and now we should reload, 69 00:04:17,400 --> 00:04:21,130 ‫and now indeed you see this kind of standard avatar 70 00:04:21,130 --> 00:04:25,640 ‫that we sometimes see in some web applications, all right. 71 00:04:25,640 --> 00:04:29,000 ‫So now, let's go ahead and update her. 72 00:04:29,000 --> 00:04:32,683 ‫And so, now Monica is actually the currently logged in user. 73 00:04:34,410 --> 00:04:36,593 ‫So, we need no name here anymore. 74 00:04:38,600 --> 00:04:41,430 ‫And now let's select the photo for Monica, 75 00:04:41,430 --> 00:04:46,250 ‫which is this one, open it, send it. 76 00:04:46,250 --> 00:04:49,500 ‫And, indeed, that worked one more time. 77 00:04:49,500 --> 00:04:52,120 ‫Here is the nicely formatted file name, 78 00:04:52,120 --> 00:04:55,130 ‫and now if we reload our page, 79 00:04:55,130 --> 00:04:58,530 ‫then of course her photo should show up here. 80 00:04:58,530 --> 00:05:03,060 ‫And indeed, here it is, awesome, that is really great. 81 00:05:03,060 --> 00:05:06,500 ‫That really feels like a real world application now. 82 00:05:06,500 --> 00:05:10,460 ‫Now, what if the user actually uploads a super large image. 83 00:05:10,460 --> 00:05:13,960 ‫Let's say 10,000 per 10,000 pixels, 84 00:05:13,960 --> 00:05:17,570 ‫or even an image that is not a square at all. 85 00:05:17,570 --> 00:05:20,870 ‫Well, in that case, we need to resize the image, and also 86 00:05:20,870 --> 00:05:24,980 ‫format the image really to fit our needs in our application. 87 00:05:24,980 --> 00:05:27,253 ‫And so that is what we will do next.