1 00:00:00,180 --> 00:00:06,300 In this video we're going to wrap up the section by using the NPM module called Sharpe to process the 2 00:00:06,300 --> 00:00:10,080 images supplied by users before we save them. 3 00:00:10,440 --> 00:00:13,450 That's going to allow us to do a couple of exciting things. 4 00:00:13,500 --> 00:00:20,550 One we'll be able to resize images so if someone uploads a huge image we don't actually want to store 5 00:00:20,550 --> 00:00:20,880 that. 6 00:00:20,880 --> 00:00:26,460 Since our little profile pictures are always going to be small in terms of how they're presented on 7 00:00:26,460 --> 00:00:31,860 the client so we can go ahead and reduce them to a specific sites. 8 00:00:31,890 --> 00:00:37,160 We can also convert the image type so we can store all of our images in a unified type. 9 00:00:37,170 --> 00:00:40,300 And for this one we're going to go with P and. 10 00:00:40,320 --> 00:00:49,350 So even if someone uploads a JPEG the sharp NPM module will be able to convert that to a PMG for us. 11 00:00:49,380 --> 00:00:54,780 Now before we get into any of that there are a couple of other things I want to clean up from the section. 12 00:00:54,810 --> 00:00:59,430 First up we can go ahead and delete the avatars folder right here. 13 00:00:59,430 --> 00:01:05,910 This is no longer going to be used and we can also delete that images directory since that's now done 14 00:01:05,910 --> 00:01:09,000 as well over an index that Jay J. 15 00:01:09,270 --> 00:01:13,180 We had worked through this little example to see how we could set up. 16 00:01:13,440 --> 00:01:15,970 We can go ahead and delete that as well. 17 00:01:16,020 --> 00:01:18,870 So right here we have the file we had before. 18 00:01:18,870 --> 00:01:24,740 And once I remove all of those empty spaces we have 15 lines of code total. 19 00:01:24,750 --> 00:01:31,170 The last thing we're gonna do before we worry about integrating Sharp has to do with the User model. 20 00:01:31,290 --> 00:01:33,600 I'm gonna head over to that file. 21 00:01:33,600 --> 00:01:40,500 I'm going to scroll down to the to Jason method and what we're gonna do right here is remove the avatar 22 00:01:40,530 --> 00:01:46,530 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 23 00:01:46,530 --> 00:01:53,070 it back with profile requests because the data is so large it really does slow down and those Jason 24 00:01:53,100 --> 00:01:54,670 based requests. 25 00:01:54,870 --> 00:02:00,050 Right here we can solve that problem using delete off of user object. 26 00:02:00,060 --> 00:02:04,350 We are going to delete the following Avatar and we're done. 27 00:02:04,350 --> 00:02:09,920 Now if we save the program we're still going to be able to access the image in the way we set up earlier. 28 00:02:09,930 --> 00:02:15,030 If I refresh the page right here I can still see my robot which is fantastic. 29 00:02:15,060 --> 00:02:19,590 All we've done is we've removed it from the profile response. 30 00:02:19,590 --> 00:02:28,000 So if I was to use postman and make a request to the read profile request I would get back the same 31 00:02:28,000 --> 00:02:29,590 data we had before. 32 00:02:29,590 --> 00:02:32,380 There's no Avatar here and that's a good thing. 33 00:02:32,620 --> 00:02:37,780 Now that we've knocked out a couple of those little housekeeping items what I want to go ahead and do 34 00:02:37,990 --> 00:02:41,220 is focus on what's inside of the user router. 35 00:02:41,230 --> 00:02:46,620 We're going to install these sharp module and we're going to make some changes to this route. 36 00:02:46,630 --> 00:02:53,690 Right here we get the image and we immediately take the buffer and we put it on the avatar field. 37 00:02:53,770 --> 00:02:57,700 We're going to use sharp in between to change that data. 38 00:02:57,700 --> 00:03:03,190 Now let's go ahead and explore our sharp in the browser then we'll install it and actually use it. 39 00:03:03,190 --> 00:03:09,580 Over here I'm going to close it some leftover documentation tabs and I'll switch my j been one over 40 00:03:09,580 --> 00:03:10,770 to the following. 41 00:03:10,900 --> 00:03:13,880 I'm just going to Google NPM sharp now. 42 00:03:13,900 --> 00:03:19,450 The first result should be these shark module on NPM and J Ask.com which it is. 43 00:03:19,450 --> 00:03:23,300 And right here we have some documentation for how we can use this. 44 00:03:23,470 --> 00:03:27,500 Now in their little summary they show us what exactly this module is for. 45 00:03:27,550 --> 00:03:31,590 It's really great for resizing images and converting their formats. 46 00:03:31,660 --> 00:03:34,300 And we're going to use it for both of those things. 47 00:03:34,360 --> 00:03:39,730 We'll make sure we come up with a common unified dimension for profile pictures. 48 00:03:39,730 --> 00:03:43,630 So when they're shown in the user interface they always look correct. 49 00:03:43,690 --> 00:03:47,380 And we're also going to convert all of the images over to these same type. 50 00:03:47,380 --> 00:03:49,350 In this case PND. 51 00:03:49,540 --> 00:03:53,650 Now the documentation for sharp leaves a little bit to be desired. 52 00:03:53,680 --> 00:03:55,690 There's really just a couple of examples. 53 00:03:55,720 --> 00:04:00,000 And to be honest they don't even include everything that the library can do. 54 00:04:00,010 --> 00:04:04,870 So we'll walk through the common use case inside of the code in V.S. see. 55 00:04:04,990 --> 00:04:10,720 Let's get started by heading over to visual studio code and shutting down our Deb server and then going 56 00:04:10,720 --> 00:04:19,900 to install the module NPM AI sharp at the latest version zero point twenty one point one and then we'll 57 00:04:19,900 --> 00:04:25,990 take a quick moment to start the dev server back up once things are installed all we're gonna do is 58 00:04:25,990 --> 00:04:31,200 load sharp in and add a couple of method calls inside of that root handler. 59 00:04:31,240 --> 00:04:37,180 There's not that much we actually need to do because sharp takes care of all of the complex stuff for 60 00:04:37,180 --> 00:04:45,370 us up at the top of the user router we can go ahead and load the module in right here a new constant 61 00:04:45,490 --> 00:04:52,900 called sharp which we will get by requiring the module we're currently installing called sharp and then 62 00:04:52,960 --> 00:04:57,600 down below we can focus on actually using it inside of that end point. 63 00:04:57,610 --> 00:05:03,190 Now sharp uses a lot of libraries behind the scenes to make everything possible to actually make it 64 00:05:03,190 --> 00:05:07,120 possible for us to convert those image types and to resize them. 65 00:05:07,420 --> 00:05:12,520 And that's why the installation process takes a bit longer than some of the other modules we've used 66 00:05:12,520 --> 00:05:16,470 before which simply contain a few JavaScript files. 67 00:05:16,480 --> 00:05:18,940 Either way things are done and down below. 68 00:05:18,940 --> 00:05:26,140 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 69 00:05:26,320 --> 00:05:29,470 to how this particular endpoint works. 70 00:05:29,620 --> 00:05:32,950 To start I'm going to comment out this line right here. 71 00:05:33,010 --> 00:05:39,430 We're still going to be setting a value on request not user dot Avatar but sharp is going to give us 72 00:05:39,430 --> 00:05:41,030 the value we set. 73 00:05:41,140 --> 00:05:45,100 We're going to give it the original image and it will convert it for us. 74 00:05:45,360 --> 00:05:48,040 So right here let's go ahead and actually get that done. 75 00:05:48,040 --> 00:05:52,840 The first thing we're going to do is create a new constant to store the output firm sharp. 76 00:05:52,840 --> 00:05:56,650 So this will be a buffer of the modified image file. 77 00:05:56,650 --> 00:05:59,590 That's what will eventually save to the database. 78 00:05:59,650 --> 00:06:04,430 And right here we are going to use a weight since Sharp is a synchronous. 79 00:06:04,510 --> 00:06:12,030 Now to start we call sharp providing it with the original file data in our case request dot file dot 80 00:06:12,040 --> 00:06:14,040 buffer is where that's stored. 81 00:06:14,050 --> 00:06:16,820 It's exactly what we were using down below. 82 00:06:16,840 --> 00:06:24,170 Now what we do is we use the two buffer method to convert that back to a buffer that we can access. 83 00:06:24,280 --> 00:06:27,170 Now at this point we actually haven't done anything. 84 00:06:27,220 --> 00:06:31,690 We've passed the data to sharp and we've asked sharp before the data back. 85 00:06:31,690 --> 00:06:37,570 What we want to do is use other methods right in between right here to modify that image. 86 00:06:37,750 --> 00:06:43,650 The one we can use is dot P and G dot BMG doesn't take any arguments. 87 00:06:43,660 --> 00:06:48,460 All it does is it converts the image over to the PMG format. 88 00:06:48,490 --> 00:06:54,420 So now we're working with just pennies in terms of what's going to be saved to the database and that'll 89 00:06:54,460 --> 00:06:55,990 make our lives a little easier. 90 00:06:55,990 --> 00:07:04,200 Down the line the other method we can use is resize resize allows us to resize a given image. 91 00:07:04,270 --> 00:07:10,090 And this is something we definitely want to do when users are uploading images we want to make sure 92 00:07:10,180 --> 00:07:13,310 that they conform to a specific criteria. 93 00:07:13,300 --> 00:07:18,790 Now when it comes to actually allowing users to crop images with a gooey that's something you would 94 00:07:18,790 --> 00:07:20,850 set up on the client side. 95 00:07:20,920 --> 00:07:27,100 So whether it was an iPhone app an Android app or a web application you would use a client side tool 96 00:07:27,100 --> 00:07:29,070 or a plug in to get that done. 97 00:07:29,110 --> 00:07:32,390 We can't do that on the server we're not going to show them a gooey. 98 00:07:32,440 --> 00:07:40,000 We're just going to resize the image to a standard size right here we provide an object to resize with 99 00:07:40,000 --> 00:07:42,450 width and height properties. 100 00:07:42,520 --> 00:07:49,000 I'm going to set the width equal to something like 250 and I'll set the height equal to 250 as well. 101 00:07:49,000 --> 00:07:55,330 So now if a user wants to take a 4 k picture with their phone in the J Peg format they would upload 102 00:07:55,330 --> 00:07:55,730 it. 103 00:07:55,810 --> 00:08:01,860 It would be reduced to 250 by 250 and it would be converted over to a PMG. 104 00:08:01,870 --> 00:08:07,720 Now once again depending on your needs you might want a larger or smaller image or maybe you don't want 105 00:08:07,720 --> 00:08:09,370 to resize it at all. 106 00:08:09,370 --> 00:08:11,570 The choice is totally up to you. 107 00:08:11,620 --> 00:08:17,320 In this case though with avatars you do want to go ahead and come up with a uniform size you can depend 108 00:08:17,320 --> 00:08:17,930 on. 109 00:08:17,950 --> 00:08:23,610 So when you're building out the client you know that all of your avatar images will be the same size. 110 00:08:23,650 --> 00:08:26,330 Now all we need to do from here is uncommon. 111 00:08:26,350 --> 00:08:32,710 This line we still want to set a value for the Avatar field though the value will be different instead 112 00:08:32,710 --> 00:08:35,230 of grabbing the original file data. 113 00:08:35,320 --> 00:08:38,280 We're going to grab the file data that Sharpe has provided. 114 00:08:38,320 --> 00:08:44,470 This is the modified image now that we know we're always working with PMG images regardless of what 115 00:08:44,470 --> 00:08:45,770 the user uploads. 116 00:08:45,790 --> 00:08:47,740 We can make a change to our request. 117 00:08:47,740 --> 00:08:50,250 Down below where we serve that image up. 118 00:08:50,470 --> 00:08:58,240 We can update the content type from image forward slash JP g to image forward slash AP energy and we're 119 00:08:58,240 --> 00:09:03,670 going to be confident that this is always correct because we're reformatting the image before saving 120 00:09:03,670 --> 00:09:04,350 it. 121 00:09:04,420 --> 00:09:07,030 Now let's go ahead and actually test our work. 122 00:09:07,060 --> 00:09:15,040 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. 123 00:09:15,040 --> 00:09:17,890 We've been running from post man right here. 124 00:09:17,890 --> 00:09:22,660 I've executed this maybe a dozen or so times over the last five videos. 125 00:09:22,660 --> 00:09:24,870 We're not going to make any changes to it. 126 00:09:24,970 --> 00:09:27,900 We're just going to send these same data off again. 127 00:09:28,120 --> 00:09:33,010 But the actual image should be changed because of the code we've added. 128 00:09:33,040 --> 00:09:39,520 Now let's go over to Google Chrome and go over to that tab where we were accessing the avatar right 129 00:09:39,520 --> 00:09:39,780 here. 130 00:09:39,790 --> 00:09:41,380 I have the full size image. 131 00:09:41,380 --> 00:09:44,320 The resolution is 19 20 by 10. 132 00:09:44,630 --> 00:09:50,720 And if I were to right click it and click Save image as I can see down below that I'm working with a 133 00:09:50,720 --> 00:09:51,860 J Peck. 134 00:09:51,860 --> 00:09:56,480 Now let's go ahead and refresh the page and see what we get back for the new result. 135 00:09:56,480 --> 00:09:57,250 Right here. 136 00:09:57,410 --> 00:10:02,030 I have an image of the resolution 250 by 250 and down below. 137 00:10:02,120 --> 00:10:05,300 I can still see my robot in the profile picture. 138 00:10:05,480 --> 00:10:10,130 So obviously I've taken a rectangle and I've converted it into a square. 139 00:10:10,130 --> 00:10:15,950 So I've lost a little bit of the content along the sides but most of it is indeed still showing exactly 140 00:10:15,950 --> 00:10:17,450 as I would have wanted. 141 00:10:17,450 --> 00:10:22,520 Now if you do want to give the user more fine grained control that's something you'll have to do on 142 00:10:22,520 --> 00:10:25,520 the user interface for your application. 143 00:10:25,550 --> 00:10:27,760 Now that we've see in the resolution is correct. 144 00:10:27,800 --> 00:10:31,600 Let's right click the image go to Save image as. 145 00:10:31,670 --> 00:10:35,790 And here we can see we're working with a PMG which is fantastic. 146 00:10:36,170 --> 00:10:43,460 So with this in place we now have a way to make sure that the data we're getting from the user is normalized 147 00:10:43,670 --> 00:10:50,540 just like we validate email addresses and convert them to lower case and remove these spaces on the 148 00:10:50,540 --> 00:10:51,630 sides. 149 00:10:51,650 --> 00:10:58,280 We can also go ahead and normalize our images bringing them to a standard resolution and standard file 150 00:10:58,490 --> 00:10:59,180 format. 151 00:10:59,210 --> 00:11:04,130 That's where we're going to stop for this video and that's also where we're going to stop for this section 152 00:11:04,430 --> 00:11:09,970 in this section we spent our time learning how we can support file uploads with Express. 153 00:11:10,070 --> 00:11:16,730 This allowed us to create a management system so users can manage their profile picture down below. 154 00:11:16,730 --> 00:11:21,610 Between these three end points a user can perform all of those CRUD operations. 155 00:11:21,620 --> 00:11:25,900 First we have see four create that can be done with this route. 156 00:11:26,030 --> 00:11:29,270 Then we have our fair read which is done down below. 157 00:11:29,360 --> 00:11:32,820 We have you for update which is also done with this end point. 158 00:11:32,840 --> 00:11:35,370 And finally D for delete. 159 00:11:35,450 --> 00:11:38,630 So that is it for this section in the next section. 160 00:11:38,630 --> 00:11:41,850 We're going to talk about how we can send emails with node j. 161 00:11:41,850 --> 00:11:44,350 S I'm really excited to get to that. 162 00:11:44,360 --> 00:11:47,710 So let's jump into the section introduction for the next one.