1 00:00:00,550 --> 00:00:07,870 We are going to implement the cover image upload and this is what I'm referring to. 2 00:00:08,380 --> 00:00:13,910 The process is going to be the same as we did for the profile image upload. 3 00:00:13,930 --> 00:00:16,500 So if we want to give it a try, why not? 4 00:00:16,510 --> 00:00:18,880 We can put this video and give it a shot. 5 00:00:18,910 --> 00:00:21,040 Otherwise, let's continue. 6 00:00:21,190 --> 00:00:22,610 Let's look at the step. 7 00:00:22,630 --> 00:00:28,210 Step number one is we need to have the controller for the actual logic. 8 00:00:28,240 --> 00:00:36,310 And lucky for us, we have the controller inside the controllers uses and the user's controller. 9 00:00:36,310 --> 00:00:40,600 And this is the controller for the cover image upload. 10 00:00:40,720 --> 00:00:45,070 The next step is that we need to have the template. 11 00:00:45,070 --> 00:00:53,020 When I click on this button or icon, you can see that I got the form for the profile image upload. 12 00:00:53,020 --> 00:01:01,330 I want to trigger or render the same form when I click on this icon, and for this we can use the same 13 00:01:01,330 --> 00:01:06,580 form or we can duplicate the form and use it for the cover image upload. 14 00:01:06,610 --> 00:01:08,250 The choice is yours. 15 00:01:08,260 --> 00:01:10,830 But before we continue, let me fix this. 16 00:01:10,840 --> 00:01:12,040 Yes, problem here. 17 00:01:12,040 --> 00:01:17,560 You can see that for the number the padding is too much is because of the image. 18 00:01:17,560 --> 00:01:20,020 So let's look at the public. 19 00:01:20,860 --> 00:01:24,430 And then CSIS and then the style CSIS. 20 00:01:24,430 --> 00:01:27,370 And for the now there's enough by CSIS. 21 00:01:27,370 --> 00:01:29,060 And this is the logo. 22 00:01:29,080 --> 00:01:29,920 CSIS. 23 00:01:29,950 --> 00:01:33,880 Let me change the weight of the logo to 50 pixels. 24 00:01:34,090 --> 00:01:35,260 All right, that is it. 25 00:01:35,260 --> 00:01:38,380 So let's go ahead and then finish up our logic. 26 00:01:38,470 --> 00:01:44,350 The next step is that when I click on this icon, I want to open a form. 27 00:01:44,350 --> 00:01:45,520 So let's see. 28 00:01:45,550 --> 00:01:47,680 Let's get back to the profile. 29 00:01:48,480 --> 00:01:51,750 Views, users and profile. 30 00:01:52,020 --> 00:01:54,410 This is an icon for that. 31 00:01:54,420 --> 00:01:58,050 If I comment this one, let's have a look. 32 00:01:58,050 --> 00:02:06,510 If we are targeting the rare icon and indeed that is the icon, but because I want to make an HTTP call, 33 00:02:06,540 --> 00:02:08,639 I want to use link tag. 34 00:02:09,210 --> 00:02:14,220 This one is going to be the same as the profile image upload length. 35 00:02:14,220 --> 00:02:19,500 So our copy this one and replace with this one. 36 00:02:20,500 --> 00:02:25,020 Now the same icon by the path we're going to change. 37 00:02:25,030 --> 00:02:28,750 So let's look at the root that renders the form. 38 00:02:28,780 --> 00:02:39,190 If you go to route users and let's locate the route that renders the cover form and this is the route. 39 00:02:39,190 --> 00:02:49,180 So I'm going to copy the you are here and for this I'm going to change this one to the red path right 40 00:02:49,180 --> 00:02:49,810 now. 41 00:02:49,840 --> 00:02:51,160 Moment of truth. 42 00:02:51,280 --> 00:02:52,780 Let me refresh it. 43 00:02:53,900 --> 00:02:55,550 And I have this. 44 00:02:55,550 --> 00:02:56,960 Yes, been messing up. 45 00:02:56,960 --> 00:03:02,220 But don't worry, when I click on the icon, indeed I have the form. 46 00:03:02,240 --> 00:03:10,310 So for this one, what I can do is that I can put it inside P tag, so I'll cut it and P and place it 47 00:03:10,310 --> 00:03:11,300 inside. 48 00:03:11,330 --> 00:03:16,460 Let's see the difference and everything is back to normal. 49 00:03:16,460 --> 00:03:23,330 So now we have the form being rendered and for this one we did it in the previous video about rendering 50 00:03:23,330 --> 00:03:24,110 pages. 51 00:03:24,470 --> 00:03:28,700 The next step is that we need to configure the form a little bit. 52 00:03:28,700 --> 00:03:35,000 So let's go to the cover image upload form and going to be the same as the profile. 53 00:03:35,000 --> 00:03:38,960 So let me open the two side by side and let's compare. 54 00:03:42,950 --> 00:03:44,330 For that you are error. 55 00:03:44,360 --> 00:03:45,550 Let's have a look. 56 00:03:45,560 --> 00:03:52,850 Let's go to the user's route and let's scroll down for cover image. 57 00:03:52,850 --> 00:03:53,620 Upload. 58 00:03:53,630 --> 00:03:57,620 Which is this The API endpoint is this one. 59 00:03:57,620 --> 00:04:05,450 So our copy and let me get to the form and here I'm going to replace with that. 60 00:04:05,450 --> 00:04:14,390 So the extra path is going to be API slash version one slash users and that is it. 61 00:04:14,600 --> 00:04:21,560 And because we are going to make use of put request and by default the client side from doesn't support, 62 00:04:21,560 --> 00:04:29,030 we are going to use the method overwrite and going to be a question mark underscore method. 63 00:04:30,210 --> 00:04:33,180 And is equal to put. 64 00:04:34,430 --> 00:04:36,590 Submitted for update. 65 00:04:36,710 --> 00:04:37,160 All right. 66 00:04:37,160 --> 00:04:39,710 So this is what you call carrot string. 67 00:04:39,800 --> 00:04:40,450 All right. 68 00:04:40,460 --> 00:04:43,180 The next step is we need to provide the name. 69 00:04:43,190 --> 00:04:47,330 I think the name for this one is also as profile. 70 00:04:48,910 --> 00:04:55,390 The next property is going to be the entire because we are sending what is called form data and going 71 00:04:55,390 --> 00:04:59,200 to be as multipart forward slash for data. 72 00:04:59,530 --> 00:05:03,490 The next step is that let's go ahead and make the requests. 73 00:05:03,490 --> 00:05:04,990 So here we go. 74 00:05:05,020 --> 00:05:12,400 Let's go to file and click on the icon and let me choose an image for the cover. 75 00:05:12,430 --> 00:05:13,990 Let me use this image. 76 00:05:16,030 --> 00:05:18,250 You can see that it worked fine. 77 00:05:18,280 --> 00:05:24,700 The next step is that instead of returning this JSON data, let's go ahead and then render a form or 78 00:05:24,700 --> 00:05:25,600 redirect. 79 00:05:25,600 --> 00:05:28,770 So the same way as we did for the profile. 80 00:05:28,780 --> 00:05:32,050 So let's go to the controller of users. 81 00:05:33,120 --> 00:05:34,740 And here you go. 82 00:05:34,950 --> 00:05:41,940 Let's go to the profile image upload and let's copy the same logic for the error and for success. 83 00:05:41,940 --> 00:05:45,060 So here I'm going to copy this one. 84 00:05:45,060 --> 00:05:47,010 That is the if statement for this. 85 00:05:48,370 --> 00:05:52,990 And let me scroll down for the cover image, which is this one, too. 86 00:05:53,020 --> 00:05:56,920 Here we are checking if a user is uploading a file. 87 00:05:57,400 --> 00:06:03,670 The next step is that we are going to send an error in case the user who is uploading the file is not 88 00:06:03,670 --> 00:06:04,310 found. 89 00:06:04,330 --> 00:06:06,130 So it's going to be the same. 90 00:06:06,130 --> 00:06:13,840 I'm going to copy the same response here and inside the upload cover image and. 91 00:06:16,120 --> 00:06:17,710 I'm going to pace it here. 92 00:06:18,460 --> 00:06:25,570 The next step is going to be in case we have an error from the ordinary server or from our server. 93 00:06:25,600 --> 00:06:31,270 We are also going to send the error message inside the cache block. 94 00:06:31,720 --> 00:06:38,170 The next step is instead of returning adjacent data, we are going to redirect the user to the profile 95 00:06:38,170 --> 00:06:40,790 and the same as this one. 96 00:06:40,810 --> 00:06:42,670 Our copy, the redirect. 97 00:06:42,670 --> 00:06:48,340 And in here I'm going to remove the JSON data and paste that. 98 00:06:48,850 --> 00:06:54,400 The next step is we need to display the error to the user in case you want to have one. 99 00:06:54,400 --> 00:06:57,820 So I'm going to be the same as the profile picture upload. 100 00:06:57,820 --> 00:07:03,640 So I'm going to copy the code for checking error and inside the cover image tool. 101 00:07:03,670 --> 00:07:08,260 This is a HTML code for the error and I'm going to replace with that. 102 00:07:08,290 --> 00:07:12,040 Now we are done with the entire process or logic. 103 00:07:12,070 --> 00:07:16,310 The next step is we need to display the profile image upload. 104 00:07:16,330 --> 00:07:25,330 So let's get back to the profile and let's locate the HTML that displaces the image and that is the 105 00:07:25,330 --> 00:07:25,790 header. 106 00:07:25,810 --> 00:07:30,430 Here you can see I use a style with a background and then the image. 107 00:07:30,430 --> 00:07:38,140 So here I'm going to replace this one with what comes back from the back end and I'm going to copy the 108 00:07:38,140 --> 00:07:40,120 same syntax here. 109 00:07:40,120 --> 00:07:44,170 And inside the URL, I'm going to paste that. 110 00:07:44,350 --> 00:07:50,800 The property here is not a profile image, so let's have a check inside the user model. 111 00:07:51,980 --> 00:07:56,990 And this is a property called Cover image, so I'll copy that. 112 00:07:57,020 --> 00:08:01,910 And inside here I'm going to replace with the cover image. 113 00:08:01,910 --> 00:08:08,240 So now if I save this one and I refresh the profile page, we're going to see the image. 114 00:08:09,170 --> 00:08:10,860 And there you go. 115 00:08:10,880 --> 00:08:14,060 We have the image being used. 116 00:08:14,090 --> 00:08:20,480 So if I want to update where I have an error, what is the error? 117 00:08:20,510 --> 00:08:21,980 Let's have a look. 118 00:08:22,250 --> 00:08:28,630 It simply means that by the time I render the template, there is no property on the error. 119 00:08:28,640 --> 00:08:35,350 So inside the user is where we are rendering the form for cover image upload. 120 00:08:35,360 --> 00:08:40,309 Let's pass in the error and assign undefined or narrow. 121 00:08:40,340 --> 00:08:46,700 This is a template, so I'm going to add and then provide the error property by default. 122 00:08:46,730 --> 00:08:48,150 There is no error. 123 00:08:48,170 --> 00:08:50,060 So let's refresh it. 124 00:08:50,860 --> 00:08:58,820 And if I hit submit you can see please upload image meaning that we are handling the error. 125 00:08:58,840 --> 00:09:08,350 So let me upload this one as a cover image and upload and you can see I have updated my profile instead 126 00:09:08,350 --> 00:09:09,540 of the cover image. 127 00:09:09,550 --> 00:09:11,320 So let me click on this one. 128 00:09:12,310 --> 00:09:16,630 And choose this one the same as that. 129 00:09:17,260 --> 00:09:22,150 And you can see that I have updated my cover image. 130 00:09:22,540 --> 00:09:27,280 Then this video, let's work on the updating the user details.