‫Let's now, just very quickly,
‫save the actual name of the uploaded image
‫to the corresponding updated user document.
‫And doing that is actually pretty simple.
‫So let's go here to the update me middleware,
‫and the data that gets updated is here stored
‫in this filtered body object, right?
‫And remember that this object here
‫is the result of filtering the request.body,
‫leaving only the name and the email, right?
‫Now, adding the photo to that as well is really simple.
‫All we have to do is something like this.
‫So, if there is request.file,
‫well then, filteredBody.photo,
‫which remember, is the name of the field
‫which holds the photo, is going to be equal to request.file,
‫and then it is .filename.
‫So what we have here, right?
‫Remember, that we only really store the image name
‫to our documents, and not the entire path to the image.
‫And so that's exactly what we want here.
‫So, the file name, all right?
‫So, give it a save, and let's try it here.
‫Also, we can now get rid of these console.logs here.
‫All right, and, so I hope this line of code here
‫made sense to you, but I believe it does.
‫So really, all we're doing, is to add the photo property
‫to the object that is going to be updated here.
‫And that photo property is, of course,
‫equal to the file's filename.
‫Okay, so let's try it here one more time.
‫And now back to the original image,
‫which is this one.
‫So, open, send, and indeed,
‫now we've got the correct filename.
‫Okay, so that really works now.
‫And now, just one small detail
‫that we didn't talk about before.
‫So, what happens when we create a new user?
‫They will not have any photo in the beginning, right?
‫And so let's actually change that.
‫Oka, and for that we have a default image here,
‫which is basically going to be this one.
‫So, let's go to the user model.
‫So, in a long time we haven't touched that one.
‫And so here, in the photo, let's now define a default, okay.
‫So here we need to create an object.
‫And now the default we want to be default.jpg.
‫All right, this would be on a new line, and this as well.
‫All right, and, so now let's actually go ahead
‫and create a new user.
‫So, sign up.
‫And I'm calling her Monica.
‫And, with the email of Monica@example.com.
‫Just like all the others, okay.
‫And still with the standard password.
‫Okay, and now let's actually go ahead and log
‫into our web application using this newly created user.
‫So, let's log out Laura here,
‫and log in as Monica with test one, two, three, four.
‫Let's try that password again.
‫Test one, two, three, four.
‫And, that's still not working.
‫Let's see, maybe we actually gave her another password.
‫Oh, okay, it's pass one, two, three, four.
‫So, stupid mistake here.
‫So pass one, two, three, four, login.
‫Okay, now it worked, and now we should reload,
‫and now indeed you see this kind of standard avatar
‫that we sometimes see in some web applications, all right.
‫So now, let's go ahead and update her.
‫And so, now Monica is actually the currently logged in user.
‫So, we need no name here anymore.
‫And now let's select the photo for Monica,
‫which is this one, open it, send it.
‫And, indeed, that worked one more time.
‫Here is the nicely formatted file name,
‫and now if we reload our page,
‫then of course her photo should show up here.
‫And indeed, here it is, awesome, that is really great.
‫That really feels like a real world application now.
‫Now, what if the user actually uploads a super large image.
‫Let's say 10,000 per 10,000 pixels,
‫or even an image that is not a square at all.
‫Well, in that case, we need to resize the image, and also
‫format the image really to fit our needs in our application.
‫And so that is what we will do next.