All language subtitles for 004 Saving Image Name to Database_Downloadly.ir_en

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.