1 00:00:00,660 --> 00:00:05,400 And once we're done with the rest of the controllers, let's also knock out the upload image one. 2 00:00:06,000 --> 00:00:09,210 And before we begin, let me just say a few things. 3 00:00:09,360 --> 00:00:16,079 First, since we already worked on upload image functionality in the Project zero seven file upload, 4 00:00:16,620 --> 00:00:18,720 I'll be moving rather swiftly. 5 00:00:19,230 --> 00:00:23,850 So if you're afraid about something, please go back and or you watch that project. 6 00:00:24,240 --> 00:00:29,310 And second, I already prepared an images folder with two images. 7 00:00:29,850 --> 00:00:34,860 So if you also want to test the functionality, I suggest doing the same now. 8 00:00:34,890 --> 00:00:38,790 When it comes to uploading images, we need to do some homework, correct? 9 00:00:39,330 --> 00:00:41,460 So first, we need to get the package. 10 00:00:42,120 --> 00:00:45,420 What package express, file upload. 11 00:00:45,870 --> 00:00:47,040 So that's the first step. 12 00:00:47,640 --> 00:00:51,010 Then we also want to set up express static. 13 00:00:51,660 --> 00:00:54,750 So we want to serve our public directory. 14 00:00:55,030 --> 00:00:57,970 And at the moment, we have none of those things. 15 00:00:58,000 --> 00:01:01,230 So let's first, I guess close. 16 00:01:01,240 --> 00:01:02,070 Read me for now. 17 00:01:03,030 --> 00:01:05,580 Close the console as well. 18 00:01:06,270 --> 00:01:07,500 And here and start. 19 00:01:07,500 --> 00:01:08,730 I'm looking for a new folder. 20 00:01:09,270 --> 00:01:16,380 I'm going to go with public and I'll right away set up upload because this is where I'm going to be 21 00:01:16,380 --> 00:01:17,430 placing my images. 22 00:01:17,670 --> 00:01:18,780 So let's go over here. 23 00:01:19,320 --> 00:01:23,880 We'll say uploads and show it needs to be a folder. 24 00:01:23,880 --> 00:01:25,200 So let me try one more time. 25 00:01:26,500 --> 00:01:31,360 Uploads and once I have a list in place, then I want to go to. 26 00:01:32,120 --> 00:01:37,100 App Jazz, like I said, we're looking for express file upload. 27 00:01:37,730 --> 00:01:38,960 So let me just double check. 28 00:01:39,690 --> 00:01:41,300 Yes, where it is. 29 00:01:41,810 --> 00:01:43,010 So back in the app? 30 00:01:43,100 --> 00:01:46,030 Yes, I can require the package. 31 00:01:46,580 --> 00:01:47,740 So let me go here. 32 00:01:47,750 --> 00:01:51,110 I guess I'm going to go below the cookie parser and all that. 33 00:01:51,320 --> 00:01:58,850 So go with Konst Express or, you know, I'm just going to call this file upload just like I did in 34 00:01:58,850 --> 00:01:59,660 previous project. 35 00:01:59,660 --> 00:02:01,220 So let's go here with require. 36 00:02:01,700 --> 00:02:04,580 And we're looking for express file upload. 37 00:02:05,030 --> 00:02:05,930 Let's save. 38 00:02:06,500 --> 00:02:10,729 Let's scroll down and where we have the cookie parser. 39 00:02:10,910 --> 00:02:12,860 Right after that, I want to do two things. 40 00:02:12,860 --> 00:02:20,450 First, I want to make that public folder available, meaning I want to set it up as our static assets. 41 00:02:20,780 --> 00:02:21,570 How do we do that? 42 00:02:21,590 --> 00:02:23,810 Well, we can use express, not static, correct. 43 00:02:23,820 --> 00:02:31,940 So let's say I've got years and we're looking for Express, Express and the letters right there. 44 00:02:31,940 --> 00:02:37,110 So we're just going static and we need to say, well, which folder we want to make it public. 45 00:02:37,130 --> 00:02:40,050 And surprise, surprise is going to be our public folder. 46 00:02:40,280 --> 00:02:47,060 So that's the number one, because remember, once we upload that image, we want that URL to pour into 47 00:02:47,060 --> 00:02:47,670 our server. 48 00:02:47,690 --> 00:02:48,140 Correct. 49 00:02:48,230 --> 00:02:49,230 That's one of the options. 50 00:02:49,250 --> 00:02:52,390 The other one was setting it up on a cloud nine. 51 00:02:52,460 --> 00:02:55,440 Now next, I want to go with that file upload. 52 00:02:55,460 --> 00:03:00,860 So let's say here up to eight years and we'll go with file upload and we'll walk it. 53 00:03:01,220 --> 00:03:06,940 And just to stay on the safe side, I'll stop the server and I'm going to go with ampm start. 54 00:03:07,010 --> 00:03:08,660 So I already started. 55 00:03:09,310 --> 00:03:11,660 And then before we continue. 56 00:03:12,170 --> 00:03:16,310 One thing that I want to do is go to my images folder. 57 00:03:16,500 --> 00:03:22,310 The one that I set up in between the videos and essentially I want to take the example one and just 58 00:03:22,310 --> 00:03:23,420 stick it in the upload. 59 00:03:23,450 --> 00:03:24,500 Now, why am I doing that? 60 00:03:24,500 --> 00:03:25,490 Just to showcase? 61 00:03:25,880 --> 00:03:30,950 I was not going to look like when we create the product with a default image? 62 00:03:31,400 --> 00:03:35,570 So if we go, where's our product model right here? 63 00:03:36,170 --> 00:03:44,570 Remember when we were creating a product, there was an image and it goes to uploads an example JPEG. 64 00:03:45,050 --> 00:03:47,210 So just to showcase, how is that going to look like? 65 00:03:47,690 --> 00:03:49,490 Let me go to my images. 66 00:03:49,760 --> 00:03:50,570 I have two of them. 67 00:03:50,570 --> 00:03:52,850 So couch, I'm going to use. 68 00:03:52,970 --> 00:03:54,350 I'm not mainstream culture. 69 00:03:54,350 --> 00:03:57,540 I'm going to use when I'll test it with the postman. 70 00:03:58,010 --> 00:04:04,430 But when it comes to the example and essentially when you create the product, you just don't even add 71 00:04:04,430 --> 00:04:04,910 the image. 72 00:04:05,420 --> 00:04:11,510 So you'll be always using example, which again, two options either sits on a server, which is going 73 00:04:11,510 --> 00:04:13,550 to be arkush or is going to be on a frontend. 74 00:04:14,240 --> 00:04:21,019 And then only when you want to update that example image, then you essentially upload the file again, 75 00:04:21,320 --> 00:04:23,000 multiple ways how you can set it up. 76 00:04:23,000 --> 00:04:26,300 We already covered some of them in the previous project. 77 00:04:26,720 --> 00:04:29,000 So hopefully all of this makes sense. 78 00:04:29,030 --> 00:04:32,270 So let me go here to example, I'm just going to copy. 79 00:04:33,050 --> 00:04:35,390 I'm looking for my current one. 80 00:04:36,670 --> 00:04:42,850 And more specifically, I want the public, I want their uploads when I go here and I want to copy and 81 00:04:42,850 --> 00:04:44,450 paste, so now I have my example. 82 00:04:44,920 --> 00:04:49,540 So now, once I send it, it should be my default image. 83 00:04:50,080 --> 00:04:52,120 So let me try it out very quickly. 84 00:04:52,120 --> 00:04:54,070 I'm going to go back here with John. 85 00:04:55,160 --> 00:04:55,850 Log in. 86 00:04:56,390 --> 00:05:02,750 I want to create a new product now, this probably is going to be the other one, but what I want to 87 00:05:02,750 --> 00:05:07,850 do right now is just remove the current image machine and check it out. 88 00:05:08,060 --> 00:05:11,870 So now this one goes to uploads example JPEG. 89 00:05:12,170 --> 00:05:21,710 So open up in your window closed and we're looking for five thousand rand forward slash uploads. 90 00:05:22,010 --> 00:05:25,160 And then we go with example JPEG. 91 00:05:25,760 --> 00:05:26,660 And what do you know? 92 00:05:27,110 --> 00:05:34,160 I have the image, so that's going to be the default image that I set up for every product unless I 93 00:05:34,520 --> 00:05:35,960 actually upload the image. 94 00:05:36,170 --> 00:05:41,180 So once that is clear, Vine, let's go back to our product controller. 95 00:05:41,180 --> 00:05:47,090 And the first thing that I want to do is check whether everything works because I can set up whatever 96 00:05:47,090 --> 00:05:48,290 functionality I want. 97 00:05:48,860 --> 00:05:57,020 Unless the image is going to be in Iraq that files, then none of this is going to make sense. 98 00:05:57,470 --> 00:06:02,710 Let me close the sidebar and let me just log here for now, Eric and files. 99 00:06:02,720 --> 00:06:05,600 And now again, let's go back to the post, man. 100 00:06:06,080 --> 00:06:13,450 Now we're looking for upload image, and if you remember, we needed to go with what we need to go with 101 00:06:13,850 --> 00:06:25,160 body when we're looking for reform form data and we'll add a key say here image and then it's not going 102 00:06:25,160 --> 00:06:25,850 to be a text. 103 00:06:25,850 --> 00:06:33,380 One is going to be a file which select files and we're looking for a desktop in this case, images. 104 00:06:33,390 --> 00:06:37,610 And this is the case where I'm going to go with the couch and I'll send it. 105 00:06:38,060 --> 00:06:40,220 And once I send, I get back the string. 106 00:06:40,220 --> 00:06:42,020 OK, that's an awesome start. 107 00:06:42,020 --> 00:06:48,560 What I'm interested is the console, though, and if in a console you see this image, we're in good 108 00:06:48,560 --> 00:06:48,860 shape. 109 00:06:49,110 --> 00:06:52,490 So now we can proceed to the next piece of functionality. 110 00:06:52,940 --> 00:06:57,110 So first, we want to check whether the files is there, correct? 111 00:06:57,470 --> 00:06:59,030 So let's go here with if. 112 00:07:00,060 --> 00:07:04,590 Record files, so if there is no record that files, what do we do bad request, correct? 113 00:07:05,400 --> 00:07:07,070 Where do we have the request? 114 00:07:08,790 --> 00:07:10,200 That's probably with the user. 115 00:07:10,210 --> 00:07:12,600 So I mean, just Typekit from the scratch, I guess. 116 00:07:12,990 --> 00:07:19,080 So let's go here with our new hour and its customer. 117 00:07:19,080 --> 00:07:24,450 So say here because the married dot and request are just say no. 118 00:07:25,170 --> 00:07:26,730 Filed along with it. 119 00:07:27,060 --> 00:07:28,950 OK, that's the first one. 120 00:07:29,310 --> 00:07:31,260 Then we want to grab the image. 121 00:07:31,680 --> 00:07:37,710 So the property over here, so in the object, in ragbag files, we have image property. 122 00:07:38,370 --> 00:07:45,280 And in there, we first want to check whether the mime type is actually image how we can do that. 123 00:07:45,360 --> 00:07:50,250 Well, we can check the maritime property and we can use JavaScript. 124 00:07:50,340 --> 00:07:52,140 Start with method, correct? 125 00:07:52,560 --> 00:07:58,590 So let's just say here Konst product image Konst product. 126 00:08:00,140 --> 00:08:03,110 And that is equal to Iraq about files. 127 00:08:03,650 --> 00:08:04,460 And that image. 128 00:08:04,640 --> 00:08:08,720 So I'm looking for that property because I know that in a post, man, that's how I named, correct. 129 00:08:09,140 --> 00:08:17,690 So say here, if the product image primetime doesn't start with image, and that's why we add the exclamation 130 00:08:17,690 --> 00:08:21,890 points of product image mime ma'am time. 131 00:08:21,890 --> 00:08:25,460 So that's the name of the property mime type. 132 00:08:25,880 --> 00:08:29,360 Then starts starts with. 133 00:08:29,930 --> 00:08:34,490 That's the method that's available in JavaScript, and I'm just going to go with image. 134 00:08:34,850 --> 00:08:35,870 Well, what do we do? 135 00:08:36,230 --> 00:08:41,210 We throw another bad request and this is the message is going to be a little bit different. 136 00:08:41,480 --> 00:08:42,590 So let's copy and paste. 137 00:08:43,010 --> 00:08:45,950 I would just say, please upload image, please. 138 00:08:46,950 --> 00:08:52,470 Upload image, let's save this and then one more thing that we can do. 139 00:08:53,310 --> 00:08:58,230 We can check for the size, so I don't want any giant images. 140 00:08:58,740 --> 00:09:01,380 So in this case, let's just go with max size. 141 00:09:01,770 --> 00:09:08,820 That's my variable, and I'm just going to go with 2024 times 2024. 142 00:09:09,120 --> 00:09:13,770 So that's going to be my max size and I'm going to go with this one and notice. 143 00:09:14,130 --> 00:09:15,090 That's my size. 144 00:09:15,390 --> 00:09:22,290 I'm just going to check if product image size property is bigger than my max size. 145 00:09:22,590 --> 00:09:23,310 That's the case. 146 00:09:23,670 --> 00:09:24,810 Well, what do we do? 147 00:09:24,840 --> 00:09:26,370 We throw another error. 148 00:09:26,610 --> 00:09:30,090 Another bad request in this case will say. 149 00:09:30,970 --> 00:09:40,570 But please upload upload image smaller, smaller than one megabyte one. 150 00:09:41,500 --> 00:09:49,510 And B and lastly, we want to use the bath, so that's something that's available on A.. 151 00:09:49,900 --> 00:09:56,760 So we have bath module and we want to set up the path to public upload. 152 00:09:56,780 --> 00:10:03,100 So first we want to get our current their name, so directory wherever, and then we want to navigate 153 00:10:03,100 --> 00:10:05,470 to public more specifically uploads. 154 00:10:05,860 --> 00:10:08,890 I want to use the product image name. 155 00:10:09,190 --> 00:10:12,700 So the name, property or here, that's going to be my entire path. 156 00:10:12,940 --> 00:10:20,260 And since we're using Express File Upload Library, we also have access to this M.V. function, which 157 00:10:20,260 --> 00:10:23,170 is going to move that file over there. 158 00:10:23,800 --> 00:10:26,890 So let's start setting everything up where I want to go up. 159 00:10:27,340 --> 00:10:29,080 I want to get my path again. 160 00:10:29,290 --> 00:10:31,930 This is available on node, so we don't need to do anything. 161 00:10:31,930 --> 00:10:34,570 We're just say, get me the path module. 162 00:10:35,140 --> 00:10:43,720 Once we have access to the path module, when we scroll back down, we set up a image path that's going 163 00:10:43,720 --> 00:10:50,890 to be the name of my letter, but we'll go with Bath that join where first I want to get the current 164 00:10:50,890 --> 00:10:54,100 directory and then we want to move up. 165 00:10:54,460 --> 00:10:57,490 We want to say we want to go to a public here. 166 00:10:58,090 --> 00:11:00,560 Then more specifically, uploads older. 167 00:11:01,000 --> 00:11:05,350 And lastly, we want to attach a file name. 168 00:11:05,590 --> 00:11:07,780 So in here, I'll use a template string. 169 00:11:08,560 --> 00:11:10,120 I won't just say product. 170 00:11:11,160 --> 00:11:12,960 Image and name. 171 00:11:13,290 --> 00:11:17,100 So that's going to be my file name once we set this one up. 172 00:11:17,400 --> 00:11:21,080 We want to go with a weight product image again. 173 00:11:21,090 --> 00:11:25,050 The function name is M.V. and we set up the image bath. 174 00:11:25,680 --> 00:11:32,130 And once we have it in place, we want to send back the response and the response is going to look something 175 00:11:32,130 --> 00:11:37,950 like this where we go with raise dot and that status. 176 00:11:39,080 --> 00:11:47,330 Back in the states, codes will say, OK, I'm not as far as the Jason, I'll just set up here the image 177 00:11:47,330 --> 00:11:52,630 property and we'll go with template string again, say uploads. 178 00:11:52,640 --> 00:11:54,110 So that's the folder. 179 00:11:54,720 --> 00:12:00,830 I'm more specifically, we're going to be looking for product, image and name. 180 00:12:01,280 --> 00:12:06,530 Let's save this and I'll start out where we're going to go back to my postman. 181 00:12:07,250 --> 00:12:12,500 And once I send, yep, I upload and couch jpeg. 182 00:12:12,500 --> 00:12:21,980 And if I take a look at my server where it is now, I have uploads, couch and JPEG and my sincere apologies. 183 00:12:22,460 --> 00:12:24,590 Is a tiny bug instead of the dot. 184 00:12:25,040 --> 00:12:26,740 I should have went with forward slash. 185 00:12:26,750 --> 00:12:27,200 So it me. 186 00:12:27,200 --> 00:12:28,220 Try one more time again. 187 00:12:28,220 --> 00:12:31,580 The value will be still the same, but notice now correctly. 188 00:12:31,580 --> 00:12:34,280 Couch is in the upload, so I'll remove this one. 189 00:12:34,730 --> 00:12:36,020 Yep, tiny bug. 190 00:12:36,410 --> 00:12:40,940 And with this in place now, we're going to start working on the reviews.