1 00:00:00,200 --> 00:00:03,770 Okay, so we have our upload route with our Multer middleware. 2 00:00:03,800 --> 00:00:09,290 Now we want to go to the front end and as usual, we're going to start in slices. 3 00:00:09,320 --> 00:00:16,610 And let's go to our products API slice and we're going to add right under update product. 4 00:00:16,850 --> 00:00:19,820 Let's say upload. 5 00:00:20,150 --> 00:00:25,610 We'll say upload product image, which is going to be a mutation. 6 00:00:26,400 --> 00:00:32,850 And let's specify query with data and then the URL, which is going to be the product URL. 7 00:00:33,590 --> 00:00:36,680 So actually, you know, what do we have? 8 00:00:38,640 --> 00:00:41,190 Do we have a constant for this? 9 00:00:41,520 --> 00:00:42,360 We don't. 10 00:00:42,360 --> 00:00:44,190 So we could just add let's do that. 11 00:00:44,190 --> 00:00:45,600 Let's say export. 12 00:00:46,230 --> 00:00:53,280 Const uploads, URL or upload URL and then we'll bring that in. 13 00:00:54,080 --> 00:00:54,830 Right here. 14 00:00:54,830 --> 00:00:57,140 Let's say upload. 15 00:00:58,110 --> 00:01:07,620 Upload URL and then we should be able to just set this directly to the upload URL and the method is 16 00:01:07,620 --> 00:01:09,690 going to be post body. 17 00:01:09,690 --> 00:01:12,590 We're going to pass the data and that should do it. 18 00:01:12,600 --> 00:01:14,100 We can close that up. 19 00:01:15,270 --> 00:01:15,690 Okay. 20 00:01:15,690 --> 00:01:17,820 And then we just want to export this. 21 00:01:18,090 --> 00:01:21,090 So let's come down here and say use. 22 00:01:21,700 --> 00:01:25,030 The upload product image mutation. 23 00:01:26,110 --> 00:01:32,530 And we can close that up and we're going to open up our product edit screen and bring in our new mutation. 24 00:01:32,530 --> 00:01:33,880 So use. 25 00:01:34,430 --> 00:01:35,600 Product. 26 00:01:36,850 --> 00:01:37,570 What was it called? 27 00:01:37,570 --> 00:01:39,490 Use product upload. 28 00:01:41,170 --> 00:01:50,170 I'll use upload product, image mutation, and then to use that, let's go right here and say const 29 00:01:50,170 --> 00:01:51,610 square brackets. 30 00:01:52,000 --> 00:01:56,920 And we want the, the actual action which will be called upload. 31 00:01:57,960 --> 00:01:59,930 Product image. 32 00:01:59,940 --> 00:02:03,030 And then let's also get the is loading. 33 00:02:03,030 --> 00:02:08,610 But we're going to rename that to, let's say, loading upload. 34 00:02:10,550 --> 00:02:11,060 Okay. 35 00:02:11,060 --> 00:02:14,330 And then we need the actual input. 36 00:02:14,870 --> 00:02:18,890 So right here where we have our placeholder, we're going to replace that. 37 00:02:19,400 --> 00:02:26,240 And let's create a form group with the control ID of image and we'll end that. 38 00:02:26,240 --> 00:02:28,430 And we're actually going to have two inputs in here. 39 00:02:28,430 --> 00:02:35,330 One is just is going to be the URL of the image and then one will be the actual the choose file button, 40 00:02:35,360 --> 00:02:37,310 the actual file input. 41 00:02:37,310 --> 00:02:40,700 So let's do a form label here. 42 00:02:41,210 --> 00:02:42,830 Why is that not printing? 43 00:02:43,960 --> 00:02:46,210 Form label of image. 44 00:02:46,210 --> 00:02:49,420 And then underneath that, we'll have our form control. 45 00:02:49,830 --> 00:02:51,910 I don't know why this is doing this. 46 00:02:52,680 --> 00:02:54,620 You just have to do it the old fashioned way. 47 00:02:54,630 --> 00:03:01,440 So form control and then that's going to have some some props in it. 48 00:03:01,440 --> 00:03:04,980 So we want the type this is going to be text. 49 00:03:05,960 --> 00:03:09,730 Because again, this is just the the URL. 50 00:03:09,740 --> 00:03:20,750 So placeholder, we'll say image or let's say enter image URL and then we'll have the value, which 51 00:03:20,750 --> 00:03:23,210 is going to be image from our state. 52 00:03:24,680 --> 00:03:28,070 And we want an on change. 53 00:03:28,700 --> 00:03:31,160 And the on change is just going to call. 54 00:03:31,790 --> 00:03:34,280 It's going to be a function pass in our event. 55 00:03:34,970 --> 00:03:37,610 And then it's just going to call set image. 56 00:03:37,650 --> 00:03:39,390 Okay, so that's just for the URL. 57 00:03:39,410 --> 00:03:46,910 Now the actual image is going to go underneath that and we're going to use I guess we could do form 58 00:03:46,910 --> 00:03:50,150 file, but I'm just going to stick to form control. 59 00:03:50,150 --> 00:03:54,410 So let's say form dot control. 60 00:03:55,030 --> 00:04:00,760 And as far as what we want for the field are the attributes or props. 61 00:04:00,760 --> 00:04:03,340 We want the type of file this time. 62 00:04:03,340 --> 00:04:15,940 So type file and label, we'll say choose file and then we'll have our on change. 63 00:04:16,300 --> 00:04:19,300 And that's going to call a handler that we're going to create above. 64 00:04:19,300 --> 00:04:23,620 So let's call this, we'll say upload file handler. 65 00:04:24,890 --> 00:04:25,280 All right. 66 00:04:25,280 --> 00:04:30,710 So we're going to get an error saying we don't have our upload file handler, so let's just create that. 67 00:04:31,450 --> 00:04:39,640 So const upload file handler and and for now I'm just going to console log just to show you what we 68 00:04:39,640 --> 00:04:39,760 get. 69 00:04:39,760 --> 00:04:44,830 And I'm sure a lot of you already know this, but this takes in an event object. 70 00:04:44,830 --> 00:04:50,530 And on that event object we have target dot files, which is an array. 71 00:04:50,530 --> 00:04:56,490 But since we're only uploading a single file, we're just going to choose the first item in that array. 72 00:04:56,500 --> 00:04:58,780 So we'll go ahead and try this out. 73 00:04:58,780 --> 00:05:03,520 And you can see we just have images slash mouse in here because that's the that's what we have in the 74 00:05:03,520 --> 00:05:04,360 database. 75 00:05:04,360 --> 00:05:11,080 But let's choose file and I have this headphones PNG, so make sure you try it with a PNG or Jpeg. 76 00:05:11,350 --> 00:05:16,450 And now if I open my console up it's not going to get uploaded. 77 00:05:16,450 --> 00:05:21,520 Nothing happens yet because we're just doing a console log, but you can see the information we get, 78 00:05:21,520 --> 00:05:27,190 we get the file name, the size, the type, the last modified and so on. 79 00:05:27,790 --> 00:05:33,080 Okay, so what we're going to need to do is create a new form data object. 80 00:05:33,080 --> 00:05:39,410 So let's say const form data and set that to new form data and then we want to append. 81 00:05:39,440 --> 00:05:48,620 So I'm going to replace this console log here with form data, dot append, and I want to append an 82 00:05:48,620 --> 00:05:50,630 image or call this image. 83 00:05:50,630 --> 00:05:57,920 So the first argument is going to be image as a string, and the second will be the actual image object. 84 00:05:58,370 --> 00:06:01,850 And then underneath that we're going to do a try catch. 85 00:06:01,850 --> 00:06:09,560 And in the try we're going to get our response from our upload product image. 86 00:06:09,560 --> 00:06:16,700 Now we just want to add on to this unwrap because it does return a promise and we want to extract that 87 00:06:17,240 --> 00:06:19,580 and then we'll just have a success. 88 00:06:19,580 --> 00:06:23,840 We'll say toast, toast, dot success. 89 00:06:24,920 --> 00:06:26,180 And. 90 00:06:27,650 --> 00:06:28,490 I think we get. 91 00:06:28,490 --> 00:06:29,690 Yeah, we should get a message. 92 00:06:29,690 --> 00:06:29,950 So. 93 00:06:30,260 --> 00:06:31,430 Dot message. 94 00:06:34,090 --> 00:06:40,360 Because remember when we when we created our route that used the Multer middleware, we had a message 95 00:06:40,360 --> 00:06:43,600 that said whatever image uploaded successfully. 96 00:06:44,110 --> 00:06:46,840 And then we just want to set image. 97 00:06:46,840 --> 00:06:54,040 So basically the component state of the image URL, we want to set that to res dot image because remember 98 00:06:54,040 --> 00:06:59,380 we also sent the, the image path back in a property called image. 99 00:07:00,170 --> 00:07:03,470 And then we'll just do toast dot error. 100 00:07:05,450 --> 00:07:08,390 And change this to RR. 101 00:07:08,420 --> 00:07:15,980 And say e rr dot data dot message or. 102 00:07:17,690 --> 00:07:18,860 And this would be error. 103 00:07:19,160 --> 00:07:19,760 Error. 104 00:07:22,360 --> 00:07:24,310 Okay, so now we can try it out. 105 00:07:24,950 --> 00:07:27,260 So I'm going to come back over to this page. 106 00:07:27,260 --> 00:07:31,640 I'm just going to reload it and I don't want to change the mouse image. 107 00:07:31,640 --> 00:07:33,680 I want to change my test product. 108 00:07:33,680 --> 00:07:41,180 So I'm going to click edit for that, Choose file, choose my headphone image and image uploaded. 109 00:07:41,980 --> 00:07:44,140 Okay, so it all happens just here. 110 00:07:44,140 --> 00:07:47,020 I don't even have to click update for it to upload. 111 00:07:47,080 --> 00:07:51,910 But in order for this to get saved to the database, I do have to click update. 112 00:07:52,870 --> 00:07:58,450 So now if I go to the front page here, you can see that that image has now been updated. 113 00:07:59,020 --> 00:07:59,440 All right. 114 00:07:59,440 --> 00:08:01,150 So we are getting there. 115 00:08:01,180 --> 00:08:04,870 The next thing that I want to be able to do is delete products. 116 00:08:04,870 --> 00:08:07,210 So we'll move on to that in the next video.