All right.
Like I mentioned quite a few times in the previous videos.
By default, we won't have access to form data in our express application.
In order to fix that, we need to install another package.
And the package name is Multer and I'll right away set it up as a middleware.
Now, please keep in mind that of course this configuration you can set up directly in a server, basically
the server.
JS But in my case I will set it up as separate middleware since we'll only use it in one route anyway.
And if you want to install it for your own projects, just go with NPM install and you're looking for
Multer.
So let's navigate right now to middleware folder.
In there we want to create a new file and I'm going to call this Multer middleware.
First, we'll start by importing the package.
So multer from Multer.
Then we will create a storage and we have a few options.
We can go with memory storage or we can go with disk storage.
So we'll go with the second one because we will need that file in order to send it to Cloudinary.
So we're going to go here with storage.
Essentially, we're just setting up the variable then multer and it has the method of disk storage.
Now in this disk storage, we provide an object and we have few available properties.
First one is going to be destination and we set both of them equal to functions.
And the second one will be a file name.
So let's start over here with destination.
So we'll set it equal to a function.
Like I said, in there we have access to rec file and they use this callback approach.
So just bear with me as far as the functionality we want to go with callback, then we'll provide Null,
which stands essentially if there is an error.
And then the actual location, the destination.
And in my case I'm going to go to public forward slash uploads since we just created those two folders
and the second one is technically optional since we'll right away send it to cloudinary anyway.
But in my case I want to keep the original file name.
How is that going to look like?
We go first with the file name property again, it's the same deal.
Pretty much.
We have the same syntax over here.
So rec file and then the callback only in this case, instead of the destination, we go with file name
and I'm going to construct a file name right above.
So right above the callback I'm going to go with const file name.
So that's my variable.
And essentially we look for file, which is the second parameter and we have access to original name.
So whatever is the original file name is going to be used when we save this file here with a multer.
And then we just want to provide the file name variable and after that we want to come up with another
variable and we'll set it equal to multer.
So we want to invoke it.
And in this object we need to provide the storage property.
And since I already have the variable, I'm just going to go storage equals to storage.
And at the very end we want to go with export default and let's export the upload.
And in which route do we want to use?
Well, remember it's the update user one Correct.
So now let's navigate to the routes one user router and essentially.
Somewhere here.
Let's import it.
So we're going to go here with import upload.
It's a default one, so it doesn't really matter.
And then let's look for this one.
So we want to do it before validate update user.
So let's invoke and we want to provide here the method.
So either we can upload multiple or we can upload single.
So in our case we only want to upload single file and therefore I'm going to go with upload single.
And this is where we want to point what is the name in the form data.
And remember we set it up as Avatar, correct.
So let me correctly provide here Avatar and what you'll notice once you navigate to the controllers
and user controller in there, we'll have access to erect file and you'll also see how we nicely right
away add this file to the public.
So let me for now, just log over here, rec dot file, and then remember, it's still goes through
update user validation.
Correct.
And what's really awesome motor just takes everything that we have form data and transform it into a
req.body.
So what I'm trying to say is that once we have this logic in place, actually everything is going to
be correct.
We won't have those error messages as far as the rest of the values are concerned.
So let me try it out.
Hopefully I won't have to restart the server, so let me send it over here again.
You can pick any image you want.
I'm just going to change over here.
The name.
I'm going to go with Peter.
Then let's look for Avatar one.
Let's send it and check it out.
So profile updated successfully.
So our request was successful and I can clearly see that over here in my logout button now also if I
navigate back.
This is going to be the file.
So this is the file that Malter just uploaded.
Notice we have the path, we have the size and all that cool stuff.
And also, if we take a look at the public one, of course in the uploads, I'll see my avatar.
And with this in place now, we can move on to the next step.