In this video we're going to wrap up the section by using the NPM module called Sharpe to process the
images supplied by users before we save them.
That's going to allow us to do a couple of exciting things.
One we'll be able to resize images so if someone uploads a huge image we don't actually want to store
that.
Since our little profile pictures are always going to be small in terms of how they're presented on
the client so we can go ahead and reduce them to a specific sites.
We can also convert the image type so we can store all of our images in a unified type.
And for this one we're going to go with P and.
So even if someone uploads a JPEG the sharp NPM module will be able to convert that to a PMG for us.
Now before we get into any of that there are a couple of other things I want to clean up from the section.
First up we can go ahead and delete the avatars folder right here.
This is no longer going to be used and we can also delete that images directory since that's now done
as well over an index that Jay J.
We had worked through this little example to see how we could set up.
We can go ahead and delete that as well.
So right here we have the file we had before.
And once I remove all of those empty spaces we have 15 lines of code total.
The last thing we're gonna do before we worry about integrating Sharp has to do with the User model.
I'm gonna head over to that file.
I'm going to scroll down to the to Jason method and what we're gonna do right here is remove the avatar
data in the last video we set up a you are real that can serve the image up so there's no need to send
it back with profile requests because the data is so large it really does slow down and those Jason
based requests.
Right here we can solve that problem using delete off of user object.
We are going to delete the following Avatar and we're done.
Now if we save the program we're still going to be able to access the image in the way we set up earlier.
If I refresh the page right here I can still see my robot which is fantastic.
All we've done is we've removed it from the profile response.
So if I was to use postman and make a request to the read profile request I would get back the same
data we had before.
There's no Avatar here and that's a good thing.
Now that we've knocked out a couple of those little housekeeping items what I want to go ahead and do
is focus on what's inside of the user router.
We're going to install these sharp module and we're going to make some changes to this route.
Right here we get the image and we immediately take the buffer and we put it on the avatar field.
We're going to use sharp in between to change that data.
Now let's go ahead and explore our sharp in the browser then we'll install it and actually use it.
Over here I'm going to close it some leftover documentation tabs and I'll switch my j been one over
to the following.
I'm just going to Google NPM sharp now.
The first result should be these shark module on NPM and J Ask.com which it is.
And right here we have some documentation for how we can use this.
Now in their little summary they show us what exactly this module is for.
It's really great for resizing images and converting their formats.
And we're going to use it for both of those things.
We'll make sure we come up with a common unified dimension for profile pictures.
So when they're shown in the user interface they always look correct.
And we're also going to convert all of the images over to these same type.
In this case PND.
Now the documentation for sharp leaves a little bit to be desired.
There's really just a couple of examples.
And to be honest they don't even include everything that the library can do.
So we'll walk through the common use case inside of the code in V.S. see.
Let's get started by heading over to visual studio code and shutting down our Deb server and then going
to install the module NPM AI sharp at the latest version zero point twenty one point one and then we'll
take a quick moment to start the dev server back up once things are installed all we're gonna do is
load sharp in and add a couple of method calls inside of that root handler.
There's not that much we actually need to do because sharp takes care of all of the complex stuff for
us up at the top of the user router we can go ahead and load the module in right here a new constant
called sharp which we will get by requiring the module we're currently installing called sharp and then
down below we can focus on actually using it inside of that end point.
Now sharp uses a lot of libraries behind the scenes to make everything possible to actually make it
possible for us to convert those image types and to resize them.
And that's why the installation process takes a bit longer than some of the other modules we've used
before which simply contain a few JavaScript files.
Either way things are done and down below.
I'll use NPM run dev to start up that dev server once again and we're going to do is make a few changes
to how this particular endpoint works.
To start I'm going to comment out this line right here.
We're still going to be setting a value on request not user dot Avatar but sharp is going to give us
the value we set.
We're going to give it the original image and it will convert it for us.
So right here let's go ahead and actually get that done.
The first thing we're going to do is create a new constant to store the output firm sharp.
So this will be a buffer of the modified image file.
That's what will eventually save to the database.
And right here we are going to use a weight since Sharp is a synchronous.
Now to start we call sharp providing it with the original file data in our case request dot file dot
buffer is where that's stored.
It's exactly what we were using down below.
Now what we do is we use the two buffer method to convert that back to a buffer that we can access.
Now at this point we actually haven't done anything.
We've passed the data to sharp and we've asked sharp before the data back.
What we want to do is use other methods right in between right here to modify that image.
The one we can use is dot P and G dot BMG doesn't take any arguments.
All it does is it converts the image over to the PMG format.
So now we're working with just pennies in terms of what's going to be saved to the database and that'll
make our lives a little easier.
Down the line the other method we can use is resize resize allows us to resize a given image.
And this is something we definitely want to do when users are uploading images we want to make sure
that they conform to a specific criteria.
Now when it comes to actually allowing users to crop images with a gooey that's something you would
set up on the client side.
So whether it was an iPhone app an Android app or a web application you would use a client side tool
or a plug in to get that done.
We can't do that on the server we're not going to show them a gooey.
We're just going to resize the image to a standard size right here we provide an object to resize with
width and height properties.
I'm going to set the width equal to something like 250 and I'll set the height equal to 250 as well.
So now if a user wants to take a 4 k picture with their phone in the J Peg format they would upload
it.
It would be reduced to 250 by 250 and it would be converted over to a PMG.
Now once again depending on your needs you might want a larger or smaller image or maybe you don't want
to resize it at all.
The choice is totally up to you.
In this case though with avatars you do want to go ahead and come up with a uniform size you can depend
on.
So when you're building out the client you know that all of your avatar images will be the same size.
Now all we need to do from here is uncommon.
This line we still want to set a value for the Avatar field though the value will be different instead
of grabbing the original file data.
We're going to grab the file data that Sharpe has provided.
This is the modified image now that we know we're always working with PMG images regardless of what
the user uploads.
We can make a change to our request.
Down below where we serve that image up.
We can update the content type from image forward slash JP g to image forward slash AP energy and we're
going to be confident that this is always correct because we're reformatting the image before saving
it.
Now let's go ahead and actually test our work.
I'm going to save user dot J S and all we're going to do is run at the exact same update Avatar request.
We've been running from post man right here.
I've executed this maybe a dozen or so times over the last five videos.
We're not going to make any changes to it.
We're just going to send these same data off again.
But the actual image should be changed because of the code we've added.
Now let's go over to Google Chrome and go over to that tab where we were accessing the avatar right
here.
I have the full size image.
The resolution is 19 20 by 10.
And if I were to right click it and click Save image as I can see down below that I'm working with a
J Peck.
Now let's go ahead and refresh the page and see what we get back for the new result.
Right here.
I have an image of the resolution 250 by 250 and down below.
I can still see my robot in the profile picture.
So obviously I've taken a rectangle and I've converted it into a square.
So I've lost a little bit of the content along the sides but most of it is indeed still showing exactly
as I would have wanted.
Now if you do want to give the user more fine grained control that's something you'll have to do on
the user interface for your application.
Now that we've see in the resolution is correct.
Let's right click the image go to Save image as.
And here we can see we're working with a PMG which is fantastic.
So with this in place we now have a way to make sure that the data we're getting from the user is normalized
just like we validate email addresses and convert them to lower case and remove these spaces on the
sides.
We can also go ahead and normalize our images bringing them to a standard resolution and standard file
format.
That's where we're going to stop for this video and that's also where we're going to stop for this section
in this section we spent our time learning how we can support file uploads with Express.
This allowed us to create a management system so users can manage their profile picture down below.
Between these three end points a user can perform all of those CRUD operations.
First we have see four create that can be done with this route.
Then we have our fair read which is done down below.
We have you for update which is also done with this end point.
And finally D for delete.
So that is it for this section in the next section.
We're going to talk about how we can send emails with node j.
S I'm really excited to get to that.
So let's jump into the section introduction for the next one.