‫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.