1 00:00:00,330 --> 00:00:05,140 Not bad, not bad once we can upload a image on the server. 2 00:00:05,700 --> 00:00:13,050 Now let's try everything together and do the whole process where we first upload the image and then 3 00:00:13,050 --> 00:00:20,190 we provide a correct path for image when we create the product, and then we'll take a look at all the 4 00:00:20,190 --> 00:00:20,680 products. 5 00:00:21,030 --> 00:00:21,660 So first. 6 00:00:22,560 --> 00:00:29,580 I want to take this one of the uploads on as a sign note the reason why I went here with image and source, 7 00:00:29,940 --> 00:00:32,780 because that's what I'm looking for on my front lawn. 8 00:00:33,030 --> 00:00:39,240 So technically, you can just send back image or a source, but then your front end, the one that I 9 00:00:39,240 --> 00:00:41,100 provided, is not going to work. 10 00:00:41,520 --> 00:00:43,290 That's why I have here the source. 11 00:00:43,470 --> 00:00:49,470 There's really no specific reason for that, apart from the fact that I just like to set it up as a 12 00:00:49,470 --> 00:00:54,510 source, because that's the name of the attribute for the image in the HTML anyway. 13 00:00:54,660 --> 00:00:56,500 And you'll see that in a second. 14 00:00:56,790 --> 00:01:00,360 So let me go back let me take this path here. 15 00:01:01,210 --> 00:01:06,520 And then I'll create a product now in this case, it's going to be product and I'm going to go with 16 00:01:06,520 --> 00:01:14,080 no product, no tell, one price is going to be six hundred, and then I'll copy and paste about me, 17 00:01:14,260 --> 00:01:15,130 send it here. 18 00:01:15,390 --> 00:01:22,360 So now we are creating a product number two, that if I take a look at all the products, I'm going 19 00:01:22,360 --> 00:01:23,650 to get list of products. 20 00:01:23,980 --> 00:01:27,340 So we'll have to still work on that one in a second. 21 00:01:27,640 --> 00:01:29,290 But let's create one more. 22 00:01:29,650 --> 00:01:31,900 Let's go here with upload image now. 23 00:01:31,960 --> 00:01:36,910 In this case, I'm going to be looking for, I don't know, computer number four again. 24 00:01:37,300 --> 00:01:40,900 Let me send it and get back the proper one. 25 00:01:41,230 --> 00:01:46,000 And I can also see that on the server I have a computer for JPEG. 26 00:01:46,840 --> 00:01:53,620 And then I want to create a product number four here, and I simply want to change the value here since 27 00:01:53,620 --> 00:01:54,990 I'm using the numbers there. 28 00:01:55,240 --> 00:02:01,450 I mean, I can just simply take the one and swap it for me, send it now. 29 00:02:01,450 --> 00:02:07,240 I have these products before we do anything, before I can explain the front end and all that, I also 30 00:02:07,240 --> 00:02:14,880 need to show you or basically set it up together with you all the product so it may go to product controller 31 00:02:14,890 --> 00:02:16,960 where we have get all the product. 32 00:02:17,380 --> 00:02:20,640 And here, remember, the name was fine. 33 00:02:20,650 --> 00:02:24,910 So we go here with product is equal to a white. 34 00:02:25,830 --> 00:02:34,450 Wait, and then we go with product, so that's the model, and then we go find we just passed an empty 35 00:02:34,450 --> 00:02:41,560 object, basically we'll be looking for all the products and then let's just go with that status and 36 00:02:41,560 --> 00:02:43,450 we're looking for status codes. 37 00:02:43,760 --> 00:02:46,330 We're going to go, OK, and Jason. 38 00:02:46,540 --> 00:02:49,300 And let's just send back all the product. 39 00:02:49,430 --> 00:02:50,350 Let's have it here. 40 00:02:51,710 --> 00:02:58,250 And then once all of that is in place, we can finally go to all the products sended and now I have 41 00:02:58,400 --> 00:02:59,520 a list of products. 42 00:02:59,800 --> 00:03:01,520 Now, these are dummy ones. 43 00:03:01,970 --> 00:03:02,530 Correct. 44 00:03:02,960 --> 00:03:05,870 So eventually, of course, I will remove them. 45 00:03:06,200 --> 00:03:12,190 But just to show you what happens if we don't have the correct path for now, I'll just leave them there. 46 00:03:12,590 --> 00:03:15,260 Then let's save all our requests. 47 00:03:15,740 --> 00:03:22,970 And what do we want to do is go back to our local host and then I'll show you on the front end, as 48 00:03:22,970 --> 00:03:28,640 well as the front end code how everything works as far as the actual applications are. 49 00:03:28,970 --> 00:03:30,070 So let me go here. 50 00:03:30,440 --> 00:03:32,300 I close a few of these tabs now. 51 00:03:32,340 --> 00:03:33,950 We don't need all of them. 52 00:03:34,730 --> 00:03:41,030 And then when it comes to file, upload first I want to go to localhost three thousand and then notice 53 00:03:41,330 --> 00:03:44,510 these first two don't have the image. 54 00:03:44,840 --> 00:03:45,280 Why? 55 00:03:45,530 --> 00:03:51,740 While because if you remember when we were setting them up, we were setting them up with a dummy. 56 00:03:52,160 --> 00:03:52,610 Correct. 57 00:03:52,850 --> 00:03:54,320 So we have this image. 58 00:03:54,320 --> 00:03:54,990 One, two, three. 59 00:03:55,280 --> 00:04:02,390 So what happens here on the front end of the browser is looking for the path, but the only thing it 60 00:04:02,390 --> 00:04:03,380 sees is one through three. 61 00:04:03,780 --> 00:04:06,830 Of course, the localhost, three thousand, one, two, three. 62 00:04:07,230 --> 00:04:07,990 There's nothing there. 63 00:04:08,180 --> 00:04:11,660 However, for these ones, everything is correct. 64 00:04:12,050 --> 00:04:18,529 I do have the product too, as well as the product for because if you take a look at those elements, 65 00:04:18,890 --> 00:04:25,220 you'll notice that image is pointing where it's pointing to the uploads and computer one. 66 00:04:26,080 --> 00:04:33,070 And just to answer your question, well, why don't we have to provide a full bath, so when we're sending 67 00:04:33,070 --> 00:04:38,910 back here, why don't we need to go with localhost and then three thousand and uploads and the name? 68 00:04:39,460 --> 00:04:47,380 Well, it's simply because of the fact that on here where we have the front end on a server, it is 69 00:04:47,380 --> 00:04:49,380 already pointing all the time to the server. 70 00:04:49,750 --> 00:04:56,440 So when we go to the example, that just means that our server and in our case, since we're working 71 00:04:56,440 --> 00:04:57,360 in the public one. 72 00:04:57,550 --> 00:04:58,000 Correct. 73 00:04:58,330 --> 00:05:02,560 So when we're talking about that, we're talking about the public folder. 74 00:05:02,890 --> 00:05:08,020 Well, we're just need to look in the uploads here and then we're looking for images. 75 00:05:08,020 --> 00:05:09,020 Hopefully that's clear. 76 00:05:09,340 --> 00:05:15,430 So when we have the public folder on the server, it's automatically with portaledge is going to be 77 00:05:15,430 --> 00:05:19,160 looking for resources in that public folder, essentially. 78 00:05:19,360 --> 00:05:24,470 And since we have their uploads and then more specifically the image name, we are able to find it. 79 00:05:24,670 --> 00:05:25,920 So that's about the server. 80 00:05:26,260 --> 00:05:29,470 Now, the second thing we need to understand that when we're sending back. 81 00:05:30,430 --> 00:05:36,320 As an API has a JSON response, usually what happens on a front end? 82 00:05:36,760 --> 00:05:40,460 You already have the euro for the server anyway. 83 00:05:40,930 --> 00:05:46,870 So in my case, for example, I have, of course, API now when I'm sending back something on a front 84 00:05:46,870 --> 00:05:50,910 that I already have, that you are the course API, blah, blah, blah, blah, blah. 85 00:05:51,250 --> 00:05:53,710 And then I simply need to attach this uploads. 86 00:05:53,990 --> 00:06:00,880 Therefore, we don't need to provide the footpath because on the server fronton will automatically point 87 00:06:01,240 --> 00:06:05,680 to whatever folder we have on server anyway in our case that it uploads. 88 00:06:05,860 --> 00:06:13,060 And then if we're sending back the JSON response that automatically on that front and wherever it is, 89 00:06:13,480 --> 00:06:15,290 the URL is going to be attached. 90 00:06:15,310 --> 00:06:21,620 So therefore there is no need to go with a full path now on a showcase of the front end. 91 00:06:21,910 --> 00:06:27,940 So if you take a look at the public one, you'll notice here in the email where I have the form. 92 00:06:28,540 --> 00:06:29,110 Awesome. 93 00:06:29,320 --> 00:06:33,560 I have the former owner for the price and I also have for the image. 94 00:06:33,580 --> 00:06:37,900 So this is going to be type file and I'm accepting images. 95 00:06:38,320 --> 00:06:38,890 All right. 96 00:06:39,220 --> 00:06:44,560 And then I'm actually processing it with a JavaScript sern here. 97 00:06:44,800 --> 00:06:47,470 I'm looking for that input file. 98 00:06:48,070 --> 00:06:55,870 And then every time there's some kind of change, I'm getting the file that is being provided. 99 00:06:56,080 --> 00:06:57,250 I use the form data. 100 00:06:57,460 --> 00:06:59,940 I add that as an image. 101 00:06:59,950 --> 00:07:07,030 So property name and on the image file and the notice are back on the front that I'm looking for that 102 00:07:07,030 --> 00:07:07,560 source. 103 00:07:07,930 --> 00:07:15,220 So I go here with post and I send that form data to my actual server from the front end. 104 00:07:15,550 --> 00:07:17,580 I need to include these headers and all that. 105 00:07:17,890 --> 00:07:26,530 And then once I get the value, once I get of source, then I just added to my JavaScript and then when 106 00:07:26,530 --> 00:07:32,500 I'm submitting the form, I use that value when I'm creating a new product. 107 00:07:32,920 --> 00:07:39,790 And the way it looks like in real life is something like this, where notice we have the form and before 108 00:07:39,790 --> 00:07:45,040 we submit the form, we also want to make sure that we have uploaded the image. 109 00:07:45,250 --> 00:07:50,770 So first year we click on Choosing the File, so we choose the file like and this is the browser thing 110 00:07:51,190 --> 00:07:51,610 the same. 111 00:07:51,610 --> 00:07:52,800 How are we having a postman? 112 00:07:53,050 --> 00:07:54,340 This is just a browser thing. 113 00:07:54,340 --> 00:08:01,000 When you set up that input type file, then we click the computer and if you want to take a look, can 114 00:08:01,000 --> 00:08:02,500 actually go to the network. 115 00:08:03,010 --> 00:08:06,850 And in here, for some reason, it's not showing me the network. 116 00:08:07,480 --> 00:08:08,640 We close this one. 117 00:08:08,650 --> 00:08:09,370 Maybe that's why. 118 00:08:09,640 --> 00:08:11,650 So let me look at the network here. 119 00:08:11,950 --> 00:08:15,070 Let me say that I'm just putting all the product, OK? 120 00:08:15,070 --> 00:08:16,270 That's my first request. 121 00:08:16,600 --> 00:08:23,170 And now we want to go here with file upload and you'll notice that every time there's a change, basically 122 00:08:23,350 --> 00:08:27,160 when we upload a new file, we make that request. 123 00:08:27,160 --> 00:08:29,300 Where do the uploads? 124 00:08:30,070 --> 00:08:33,970 So now I store that path properly on the front end. 125 00:08:34,210 --> 00:08:41,710 And then when I'm adding the product, this is where I'm sending the name The Price as well as the path. 126 00:08:41,740 --> 00:08:45,390 So now once we click on adding the product, check it out. 127 00:08:45,640 --> 00:08:49,750 Now, I have a computer with this image of latest clear. 128 00:08:50,080 --> 00:08:54,780 Hopefully you understand how everything works and now we can move on to our next topic.