Okay.
And up next, let's refactor our upload image functionality.
You see, since I recorded the course, Render has made some changes and we can only implement such
uploads approach if we use a paid option.
So we need to use a disk space on render and it's not available with free option.
So don't be surprised if upload image functionality does not work on render.
Now, in order to fix it, we'll need to install one more package and we'll need to make changes to
our existing code.
So for starters, I want to remove the public.
So effectively we're not using it for our front end.
And after this video, we're also not going to use it.
With our upload image functionality.
So let's start from the scratch.
We want to remove the public folder altogether and if everything is correct, if you take a look at
the server, notice we're not pointing to a public here anymore anyway.
Now as far as the changes you see, instead of using a disk space with Multer, we will actually use
a memory storage.
So remember when we set up our middleware, the malter one, we used disk storage.
So effectively we store it on a disk.
Notice we even have this path over here public forward slash uploads.
Now there's another option, a memory storage.
So essentially we'll save our image as a buffer.
Now the problem is we cannot directly push buffer to a Cloudinary so we still want to store our image
in a cloudinary However, we will need some extra package that will take this buffer and turn it into
something that Cloudinary can work with.
So long story short, here's what we want to do.
We want to install this package.
And again, it depends when you start watching the course.
Of course I'll add it to the packages in the Readme.
So if you're watching this later, most likely you already have this package.
If not, then of course you'll need to install now in order to check it, just go to package Json and
again, if you see it here, then you're good.
If not, then you'll need to install.
So let me navigate back to my terminal and I just want to go with this command.
So let me run it.
I want to install this package and if everything is correct, I want to go with NPM and then run Dev.
So again, we're going to work on our project locally.
Once everything is done, we'll push it up to a GitHub and then from there Render is going to pick it
up and build our project.
So I installed the package.
Okay, now we want to go to a Multer middleware and like I said, make some changes.
So for starters over here.
Instead of disk storage, we're going to go with Malter and Dot and the other one is memory storage.
Now here we are now going to provide any arguments.
Essentially we'll have our storage that is equal to a memory storage and then we still have this upload,
which we're exporting.
And then if you remember in the roots in the user root.
We went with upload single and we're still looking for Avatar.
So this part does not change.
But here's what we want to do.
We want to go back to this middleware once we have installed.
Essentially our package we want to import.
And this is important.
We want to go here with data.
And as far as my name, I'm going to go with parser.
But where we're importing from this is going to be very specific.
So we want to go with our package then forward slash and then we're looking for parser, but make sure
you add JS, otherwise you'll have a bug.
And also I want to grab a path module which of course is built in.
To a node and therefore I'm just going to go with import path from path.
So let's save this one.
And essentially there's going to be a helper function which will also export.
So let's start over here by creating that function.
So notice I'll have this default upload since I don't want to change my code in too many places in the
application.
So therefore I'm keeping this the same.
And remember, you can only have one export default per file and therefore obviously this is going to
be named export.
And in my case, I'm going to call this format.
An image.
Now, this format, image function is going to be looking for one thing and one thing only.
If you remember, when we run Malter, essentially we add this file to a request object.
Remember it was located in rec dot file and don't worry, we will log it of course, together.
So here for now, let's just log.
The file to see whether everything worked correctly and then we'll add the functionality.
So now let's navigate to the user controller and we're looking for our update user.
So we're not going to use this await link anymore because again, we're not using disk storage, so
please make sure you also follow the same setup.
We want to remove this line of code and pretty much everything else is going to stay the same.
So we only want to make this change.
And then, of course.
We'll implement our package.
Now, also, we don't need this anymore.
So we can remove this one.
However, we do want to import format an image from our middleware.
Then let's keep on moving and notice where I have here the rec dot file.
Effectively, I want to format the image and once I get back the response, that's the one that I'm
going to upload to a cloudinary.
And you know what?
For now I'm just going to return.
So this is just going to be temporary and above the return I'm going to set up const file is equal to
format image.
And now like I said, we want to pass in that file in there.
And of course at the moment we're just logging.
So now let's just navigate back to the browser.
Now I have quite a few tabs open over here, so you know what?
Let me close it.
So this is going to be my render one, which of course I want to showcase at the end of the video.
So for now, let's just go to file 173.
Now, in this case, I do want to log in as my user because otherwise with a temp one, I'm not going
to be able to showcase that.
Well, then let me provide over here the password.
Let me log in.
Profile over here again for now.
Of course, nothing is going to work.
I simply want to showcase what are we getting?
So let me click on Submit.
Okay.
It says here submitting since, of course, we're just returning over here.
I'm not sending a response.
What I'm interested, of course, is this.
So this is what we're logging in our format image.
Correct.
Again, same deal.
We still have the rec file object.
The difference, of course, is that we're not saving this on a disk anywhere.
So this one is in memory.
And like I said, notice this buffer.
So that's the difference.
So now we want to use our package and essentially format to something cloudinary can work with, because
if you'll try to pass this buffer directly like we did previously with rec dot file and whatever was
the property, it's not going to work.
So now let's navigate back to Multer middleware and the first thing we want to do in this file is to
invoke new and then whatever you use the name over here.
So I'm going to go with const, then parser and set it equal to new data and parser and we want to invoke
it.
So that's the first step.
And once I save I get the error in the console.
Don't worry, it's because we're not setting up the return in the update user.
We'll fix that in a second.
So we're going to go here with new data parser and then in the format image instead of the log.
First I want to grab the extension.
So essentially the package is looking for the extension.
So we're going to go over here with const, then file extension.
That's going to be the name of my variable.
And in order to get it, I'm going to use the path module.
So it has this extension name property.
And in here we simply want to go with file.
Remember, it has this original name.
Let's scroll up.
Notice over here this original name.
That's what we want to use.
Therefore I'm going to go dot and then original name.
And then we want to turn this into a string.
So we're going to go to string, we invoke that, and then what we want to return from this format,
image function, we want to go with our parser.
So essentially what we're getting back, that's our instance.
Then the method name is format.
We want to pass in the file extension.
And then the second argument is going to be file dot and then the buffer.
So again, this is coming from here.
And lastly, we want to go with dot content and that's the one we're going to pass into a Cloudinary.
So now let's navigate back to our user controller.
Let's start by removing the return.
And instead of this req dot file dot path, we simply want to pass here the file.
So set it up over here.
And like I said, everything else stays the same.
Yes, we still want to remove the old picture if the user is adding a new one.
And yes, we still want to grab the secure URL, the public ID and all that, so nothing else changes
in the update.
User one.
We only change the format.
So instead of saving it on a disk, now we're saving it in a memory and then we're formatting this buffer
into something cloudinary can work with.
And before we test it locally, I actually want to push this up since of course I want to showcase that
everything works on render.
So let's say over here fix update User Okay, let's push this up.
And for starters, let's just take a look what's happening here locally.
So this is going to be my 5173.
Okay.
Again, I'll have to log in then.
Let me navigate to a profile.
And I'm using this image over here.
So let me switch to another one.
Let me change the name.
Maybe.
Well, let's go.
Yep.
Notice I nicely changed the image.
And also, of course, name is different right now.
So now let's navigate to a render.
Let's see what's happening over here.
It looks like Render is still building my application, so I'm going to wait and I'll test it when everything
is ready to go.
And once render is done building my project, let me navigate to URL.
I'll close this one.
So that's my local one.
Okay.
And then again I'll have to log in.
So that doesn't change.
And yes, we still want to do it with some kind of user that actually can.
Update the profile since the demo one is not allowed.
Then let's navigate to profile.
Notice this is going to be my current image.
So now let me go.
And look for another one.
And here I'm going to go back to John.
And again, if everything is correct now, we'll be able to update the image on render platform even
with the free option.