All language subtitles for 006 Adding Image Uploads to Form_Downloadly.ir_en

So let's now allow users

to upload their photos right on our website.

And so this is what we want.

When we click here, we basically want

to open a new window for which we can select

a new image to upload and then when we click

this button and submit a form

of course then we want to upload that image

into our backend and update the user, right.

And so the first step into doing that

will be to add a new input element to our html.

So basically to our pack template

which will then allow that file selector

to open when we click here.

So, let's go to our views

and to account and so it's this form

where we now have to add that input.

So right now we have that link here which says new photo.

But of course, it's not a link that we're going to use.

So this was really just a placeholder.

And so let's get rid of it.

So what we need is an input.

Off to type file.

All right, so before, for the name

we had an input with the type text.

We also have input with the type of email

and there are also a special ones for password.

So input for password

and so for files, there is one of course for files.

We can then specify which kind of file we actually accept.

And we can do something like this.

Image and then all of them.

So basically all formats get their images

so which have a mind type starting

with image are accepted here.

Now let's also give this here a class name

so that it appears nicely formatted on our page.

And so this is the class name that I have in my css.

And now also giving it an ID so that we can

then select it in java script.

Add that as photo and finally just like the

other fields, we also give it a name.

So name of photo as well.

And of course it is photo because that's the name

that we have in our user document

and it's also the field name that multer is expecting.

So this here is upload and then we also specify

a label for it.

And we set it to four and then the ID

of the input element, all right.

So I'm not sure if you're familiar

with how that works in html

but it's also not really important.

So the way it happens is that when we click

this label here, it will then actually activate

the input element which has the ID

that we specify here in form.

And so in that case that is the photo, all right.

And actually it's this label here

which will have the text choose new photo.

And so when we then click the label

it will then activate this input

which in turn will open up the window

from which we can select a file.

And so that's all we need to do for the input here.

Now, just like before, there are two possible ways

of sending this data to the server.

So first, without the API as we did

in one previous lecture.

We already find the action that we want to take

and also the method.

And with that the data is

then directly sent to the server.

Now if we wanted to send a file

using this method, we then would need

to specify another option here.

And that is the enc type.

So enc type would have to be multi-part form data.

So multi-part slash form data, all right.

And so here again, we have this name multi-part.

And so as we said before, multi-part

is always for sending files to the server.

And again we actually need the multer middleware

to handle this multi-part form data, all right.

And actually the name multer comes from multi-part.

So mult, multer, okay.

Anyway again if we wanted to send the data

without an API, we would always have

to specify this enc type.

Otherwise the form would simply ignore the file

and not send it, okay.

But as we already know, we are actually

using it with the API, right.

And so we do not need to specify this enc type

but we will kind of have to do it programmatically.

And so let's actually do that.

So let's now send our data, including

of course the photo by doing an API call

such as we've been doing in the last section.

And so we need to now open in our public folder

and from their js, we open up index.js.

And so right here is where we actually

send the data to be updated on the server.

Well we're not really sending them here

but we're selecting them from the form

and then passing them into update settings.

All right, but now remember how I said

that we kind of needed to programmatically

recreate a multi-part form data?

And so we need to do it like this.

Let's call it form and then new form data.

All right, and now onto that form

we need to keep appending new data.

And basically one append for each

of the data that we want to send.

So form.append and the first one is the name.

So we specify name here and then the value of the name.

And so that is of course this one.

So let's grab that, paste it here and duplicate it.

And next up is the email, okay.

Then let's get rid of this enter into update settings.

We then pass the form, okay.

And or a text call using axios

will then actually recognize this form

here as an object and will work

just the same as it did before, okay.

So here in update settings where we pass

in the data, which is then passed

in here into the axios request,

we do not need to change anything.

All right, so this is equivalent

to what we had before with name and email

but now of course let's also add the photo

which is the entire reason why we now

have to do it like this.

So form.append again then the name

we want to give it is of course again, photo

and then document

.getelementbyid which is also photo

but now it is not .value

but instead .files, all right.

And these files are actually in array

and so since there's only one,

we need to select that first element in the array

and so that's zero.

All right, and let's actually log this form to the console

just 'til we get a quick look

at what this form actually is.

But in a nutshell, as I said before,

we basically recreate this multi-part form data.

And so that's actually why it's called form data

is because, well, that form data is also here

in this multi-part enc type, okay.

So, I guess that is actually enough

for us to now try this out.

So as I said, in update settings,

there's nothing that we need to change

and also the update me endpoint

where we are submitting this request tool

so this one has also already working

and ready to accept images and even to resize them, right.

And so let's now go ahead and try this.

And so let's reload this one more time.

And so let's see, and indeed we now get

our file picker basically.

So this window where we can now select

the file and what I'm going to do

is to basically put back the original image

that we had on this user.

So that's on desktop, natours, public, image

users, and it was user 11, so this one.

And so that's now uploaded.

So open, save to settings, and data update is successfully.

Now it doesn't reflect here immediately.

Neither here nor up here but it should

so once we upload this page.

And we could indeed also do it with java script

but that's actually a lot of work.

I'd tried to do it and I did it

but then I thought that it's just too much work

and not worth to implement it here.

But anyway just to test if it actually worked,

we need to now reload the page.

And it did.

Here is now the new image that we just uploaded.

So, great.

Let's take a look at the folder itself.

If it's actually there, also, and if

it was correctly transformed.

So that's an image.

Let's reload it here.

And so now I'm not sure which one it is.

Ah, exactly.

So 500 times 500 and now that it's completely blurred

because the original image was a lot smaller.

But nevermind, that doesn't matter at all.

What matters is that we can now actually upload photos

right from this form.

I want that's all to take a look at our console here

at that form data that I thought that we had logged

and it didn't appear here

because we already reloaded the page.

But anyway, I wanted to put the other image back here.

So the one that we actually uploaded before

which is in dev-data, image, and aarav.

All right, data updated successfully.

Let's just quickly take a look at our phone data here.

Ah, but I guess we cannot really see what we have here.

Let's see.

Nah, we cannot really see what we have.

Okay, so I never took a look at this.

And I thought we could maybe

see the information but nevermind.

What matters is that it actually worked.

So, if we reload now, then of course

this older image is back again.

Awesome, so once more, this application

is really starting to feel more and more real work like.