1 00:00:00,500 --> 00:00:06,290 In this video, we are going to implement profile picture upload. 2 00:00:06,440 --> 00:00:08,660 So let's look at the step. 3 00:00:08,930 --> 00:00:17,990 Step number one is we need to have the logic or the API being implemented and we have done that one 4 00:00:17,990 --> 00:00:20,930 and the API section of this course. 5 00:00:20,960 --> 00:00:24,080 So if you go to use this and that is the controller. 6 00:00:24,290 --> 00:00:29,270 Let's locate the controller for profile for upload. 7 00:00:30,220 --> 00:00:31,720 Which is this one. 8 00:00:31,720 --> 00:00:34,180 So the logic is complete. 9 00:00:34,450 --> 00:00:40,410 The next step is we need to go to the front end to allow the user to upload. 10 00:00:40,420 --> 00:00:43,390 So for the front end, let's look at the flow. 11 00:00:43,570 --> 00:00:48,280 Next step is you need to log in and indeed I have logged in. 12 00:00:48,280 --> 00:00:56,590 So let's go to the profile then let's locate the button to click to render the profile photo upload 13 00:00:56,590 --> 00:00:57,100 form. 14 00:00:57,100 --> 00:00:58,900 And this is a button. 15 00:00:58,900 --> 00:01:02,380 When I click on that, you can see it has been rendered. 16 00:01:02,380 --> 00:01:07,720 And for this one tool, we did it and then the rendering pages of this project. 17 00:01:07,720 --> 00:01:11,440 So let's look at the profile once again. 18 00:01:11,440 --> 00:01:21,100 We use users profile and let's locate where we are rendering that form, which is this one. 19 00:01:21,310 --> 00:01:24,070 So now the form is being rendered. 20 00:01:24,070 --> 00:01:33,220 The next step is that when I click on Choose File and I select any of this file when I hit send, I 21 00:01:33,220 --> 00:01:35,410 want to upload that photo. 22 00:01:35,440 --> 00:01:37,720 So how are you going to do it? 23 00:01:37,810 --> 00:01:44,620 Remember on the API development the way we did it by uploading a photo from the back end? 24 00:01:44,620 --> 00:01:46,870 Using this tool is like this. 25 00:01:46,900 --> 00:01:50,830 Let me show you one more time, which is to file for upload. 26 00:01:51,100 --> 00:01:55,750 Remember that for this we are not going to send JSON data. 27 00:01:55,750 --> 00:02:00,520 So for this we are going to send what is called form data. 28 00:02:00,520 --> 00:02:06,880 So the way we did it from here, we are going to implement the same logic inside the form. 29 00:02:06,880 --> 00:02:13,840 So let's look at the form and that is the profile photo upload, which is this one. 30 00:02:14,200 --> 00:02:19,990 Now let's scroll down and let's look at the form and here is a form. 31 00:02:19,990 --> 00:02:30,640 The action determines the endpoint and the endpoint will go to API version one users and then the profile 32 00:02:30,640 --> 00:02:32,020 photo upload. 33 00:02:32,880 --> 00:02:42,420 And then the HTTP method for this is not post request, but instead put requests by guides. 34 00:02:42,450 --> 00:02:44,010 Here is a problem. 35 00:02:44,190 --> 00:02:54,960 By default, a form does not support a HTTP method with update or delete or patch it support only posts 36 00:02:54,960 --> 00:02:57,100 and then get method. 37 00:02:57,120 --> 00:03:00,510 So how are you going to make use of port request? 38 00:03:00,510 --> 00:03:05,970 Because updating a profile photo is updating what is called a record. 39 00:03:05,970 --> 00:03:14,040 So even for this, if you hit space and see that we have this two method and this clearly shows that 40 00:03:14,040 --> 00:03:21,840 we only have two methods that support gets and post, but we want what is called update. 41 00:03:21,840 --> 00:03:24,480 How are you going to implement that? 42 00:03:24,690 --> 00:03:32,430 We are going to use a package or method override and this is the NPM package. 43 00:03:32,430 --> 00:03:36,390 Let's click on that and read more about this package. 44 00:03:36,720 --> 00:03:45,930 It says that it lets you use HTTP verbs such as puts or delete in places where the client does not support 45 00:03:45,930 --> 00:03:46,410 it. 46 00:03:46,410 --> 00:03:49,260 So this is what we are going to use. 47 00:03:49,260 --> 00:03:52,920 So first step is let's install this package. 48 00:03:52,920 --> 00:03:57,870 So I'll click on this one and get back to my terminal here. 49 00:03:57,900 --> 00:04:00,780 Shut down and let me clear it. 50 00:04:01,080 --> 00:04:05,130 Let me paste the package as that method override. 51 00:04:06,450 --> 00:04:11,040 Now it's not finished installing, so let me restart the server. 52 00:04:11,610 --> 00:04:16,470 Next step is let's read more about how it is being used. 53 00:04:16,470 --> 00:04:21,570 And this is the sample code that we are going to use. 54 00:04:21,810 --> 00:04:29,100 Let's get back to server dot JS file and let's go ahead and require that package. 55 00:04:29,100 --> 00:04:35,310 So here I'm going to make this off const method override. 56 00:04:37,330 --> 00:04:43,990 Is equal to require the package and method override. 57 00:04:44,500 --> 00:04:50,800 The next step is that we need to configure by passing it as a middleware. 58 00:04:51,010 --> 00:04:56,020 So here our other comments by saying method override. 59 00:04:56,910 --> 00:05:05,940 All right make use of app dot use and we pass in the method override and here I'm going to pass in one 60 00:05:05,940 --> 00:05:08,880 argument going to be dash method. 61 00:05:09,180 --> 00:05:12,330 So how are we going to use it is pretty simple. 62 00:05:12,360 --> 00:05:17,670 Let's get back to where we want to use that method instead of posts. 63 00:05:17,670 --> 00:05:22,230 So this is how we are going to make use or wait for the you are error. 64 00:05:22,230 --> 00:05:30,030 We are going to use what is called query string and that is question mark and that's called method. 65 00:05:30,030 --> 00:05:35,670 And we want to use the put method and that is it. 66 00:05:35,730 --> 00:05:43,770 When we say query string is additional property or value being appended to our URL, whether it is there 67 00:05:43,770 --> 00:05:47,340 or not, it hasn't changed the main you are error. 68 00:05:47,340 --> 00:05:50,190 So going to be the optional payload. 69 00:05:50,220 --> 00:05:57,510 The next step is that instead of sending JSON data, we are going to send what is called for data. 70 00:05:57,510 --> 00:06:06,870 So make use of the anchor type, then provide multipart for a for data and that is it. 71 00:06:07,050 --> 00:06:09,420 The next step is for the name. 72 00:06:09,420 --> 00:06:13,260 We need to provide the value we passed to Malta. 73 00:06:13,410 --> 00:06:20,040 Let's locate the user's roots and let's see the value that we pass in to that. 74 00:06:20,040 --> 00:06:26,430 So let's locate the profile photo upload, which is this one. 75 00:06:26,730 --> 00:06:30,180 You can see that we use what is called profile. 76 00:06:30,180 --> 00:06:37,320 So you are going to provide that one as a name here as pull file, and that is it. 77 00:06:37,320 --> 00:06:39,300 Let's remove this one. 78 00:06:39,330 --> 00:06:42,060 We are done with the entire logic. 79 00:06:42,060 --> 00:06:44,250 So moments of truth. 80 00:06:44,580 --> 00:06:48,750 So let me come here and let me refresh it. 81 00:06:51,290 --> 00:06:52,250 Profile. 82 00:06:54,170 --> 00:06:56,930 And let me choose this image. 83 00:06:58,060 --> 00:06:58,810 Upload. 84 00:06:59,940 --> 00:07:03,870 And you can see that we got success and we got back. 85 00:07:03,900 --> 00:07:07,380 The image being uploaded to Cloud nine. 86 00:07:07,650 --> 00:07:12,750 So the next video, let's continue from here because I don't want to make this video long. 87 00:07:12,780 --> 00:07:13,170 All right. 88 00:07:13,170 --> 00:07:15,000 So catch you up in the next video.