1 00:00:00,330 --> 00:00:07,020 All right, and once we know how we can send files from the spokesman to our server now let's take a 2 00:00:07,020 --> 00:00:13,560 look at the package that will allow us to access it and do something meaningful on a server. 3 00:00:14,070 --> 00:00:19,170 Like I already mentioned, the previous video package namers express file upload. 4 00:00:19,420 --> 00:00:21,930 And that's one of the many options that you can use. 5 00:00:21,930 --> 00:00:25,890 But my opinion, this is probably the most straightforward one. 6 00:00:26,250 --> 00:00:32,880 And if you never get to the docs, if you want to install it, you go with NPM and then file upload. 7 00:00:33,030 --> 00:00:37,800 Now, of course, it is already included in the Star as well as the final one. 8 00:00:38,310 --> 00:00:45,160 And once we invoke it, basically, once we assign it to a variable and then invoke it in our app, 9 00:00:45,180 --> 00:00:51,420 Jazz Fan will have access to our file in front of that files. 10 00:00:51,720 --> 00:00:54,190 And then we have a bunch of properties which will contain logs. 11 00:00:54,210 --> 00:01:01,550 So you'll be able to say as well as this M.V. function, which allows us to move the file somewhere. 12 00:01:01,770 --> 00:01:09,390 And in our case, it's going to be to our public folder and you'll see why we'll do that in just a few 13 00:01:09,390 --> 00:01:09,780 seconds. 14 00:01:10,080 --> 00:01:13,340 So first, let's navigate back to our project path. 15 00:01:13,350 --> 00:01:17,010 Before we can do anything, we need to go to Abidjan's. 16 00:01:17,250 --> 00:01:24,210 We need to import the file upload remember the package, name, express file, upload, and then we 17 00:01:24,210 --> 00:01:28,960 need to invoke it so we can probably do it here with the rest of the middleware. 18 00:01:29,280 --> 00:01:32,280 So let you scroll up right after Xpress. 19 00:01:32,280 --> 00:01:35,150 We're going to go with CONSED and file upload. 20 00:01:35,160 --> 00:01:40,500 Now that is the default export so we don't have to use the Curley's we're going to go here. 21 00:01:40,500 --> 00:01:47,910 Would require we're looking for specific file upload and then we just want to invoke it. 22 00:01:48,270 --> 00:01:57,090 So scroll down about years and let's just go with file upload and let's invoke it then in the uploads 23 00:01:57,090 --> 00:02:05,470 controller I want to cancel log files just so you clearly see where the image is coming from. 24 00:02:05,850 --> 00:02:08,039 So it may navigate back to the postman. 25 00:02:08,530 --> 00:02:14,250 Let me send it then back on the server all the way into bottom. 26 00:02:14,250 --> 00:02:15,090 What do we see here? 27 00:02:15,450 --> 00:02:20,340 We see the image, of course, that corresponds to the name that I have over here. 28 00:02:20,970 --> 00:02:26,340 If you'll call this something different, if you call this product image than in here, also, the name 29 00:02:26,340 --> 00:02:27,960 is going to be exactly the same. 30 00:02:28,320 --> 00:02:31,410 And here you can see the name or image. 31 00:02:31,560 --> 00:02:34,840 So that's the one that I'm passing and of course, the data. 32 00:02:35,220 --> 00:02:37,530 So this is what we're getting back now. 33 00:02:37,530 --> 00:02:42,660 We just need to use that more function to store it on our server. 34 00:02:43,450 --> 00:02:49,860 And what's important, not only we want to store it on a server, we also want to make it publicly available. 35 00:02:50,400 --> 00:02:57,300 And if you remember when we talked about the express, the general setup, one of the things that we 36 00:02:57,300 --> 00:03:02,010 covered was the middleware that allow us to make something public. 37 00:03:02,310 --> 00:03:06,950 Now, in our case, we always did that with browser apps, the next session emails and all that. 38 00:03:07,230 --> 00:03:09,650 Basically, this was our public application. 39 00:03:09,960 --> 00:03:16,980 So now what we're going to do, we're going to create another folder in the public and we'll store the 40 00:03:16,980 --> 00:03:17,660 images order. 41 00:03:18,240 --> 00:03:25,590 And since we'll make this public available, then when we're sending back the path, it will correctly 42 00:03:26,040 --> 00:03:29,950 point to the image, to the image on a server. 43 00:03:30,270 --> 00:03:32,670 So let's start doing everything step by step. 44 00:03:32,940 --> 00:03:40,170 First, when I want is to set up some kind of variable where I'll store that image. 45 00:03:40,560 --> 00:03:42,660 So I'll remove that files. 46 00:03:42,660 --> 00:03:44,670 Hopefully it's clear where we're getting this from. 47 00:03:45,060 --> 00:03:53,020 And let's just go with let product image is going to be equal to wreck files and image. 48 00:03:53,310 --> 00:03:56,490 So this is where I'm storing that a giant object. 49 00:03:56,970 --> 00:04:01,970 Then we want to create a path that we need to pass in the move function. 50 00:04:02,400 --> 00:04:03,930 So more function. 51 00:04:04,440 --> 00:04:12,120 I believe this one over here is looking for one thing that's looking for the path where the image needs 52 00:04:12,120 --> 00:04:12,690 to be moved. 53 00:04:13,140 --> 00:04:18,600 And in our case, we'll have to use the path which is a built in non module. 54 00:04:18,870 --> 00:04:20,519 So we don't need to install anything. 55 00:04:20,519 --> 00:04:23,310 We're just going to go here with path require. 56 00:04:23,640 --> 00:04:30,150 We're looking for the path module and then in the upload product image. 57 00:04:30,570 --> 00:04:32,440 First, let's construct that path. 58 00:04:32,870 --> 00:04:35,420 Now, you don't have to make this in public. 59 00:04:35,880 --> 00:04:42,000 The thing is, since I'll make this public available anyway, because I want to show you the front end, 60 00:04:42,360 --> 00:04:44,990 I might as well just set it up there. 61 00:04:45,450 --> 00:04:48,840 Keep in mind that you can set it up in any folder you want. 62 00:04:48,990 --> 00:04:51,120 Basically, you can create one from scratch. 63 00:04:51,390 --> 00:04:58,680 Just make sure that just like I'll make this public available as a static asset. 64 00:04:59,210 --> 00:05:04,780 You the same thing with those images, if you're setting them up somewhere else in nonmarket case, 65 00:05:04,790 --> 00:05:08,180 I'm going to construct the path and that's exactly how I'm going to call that. 66 00:05:08,450 --> 00:05:15,150 I'm going to go with image that I'm looking for the path and that's going to be equal to my path and 67 00:05:15,170 --> 00:05:17,110 will go with joint function. 68 00:05:17,450 --> 00:05:19,740 And here I want to pass in the Durnan. 69 00:05:20,150 --> 00:05:24,680 So the current directory and then we want to move up to levels. 70 00:05:24,890 --> 00:05:29,390 That's where I would go that the public and uploads. 71 00:05:29,720 --> 00:05:30,440 Not a moment. 72 00:05:30,440 --> 00:05:31,370 We don't have the file. 73 00:05:31,680 --> 00:05:32,270 That's fine. 74 00:05:32,270 --> 00:05:33,220 Meaning the folder. 75 00:05:33,620 --> 00:05:35,450 Eventually it's going to be there. 76 00:05:35,720 --> 00:05:41,450 And then I want to add the file line now, whereas the file name coming from right here, I have the 77 00:05:41,450 --> 00:05:46,750 image of that line and it's coming here as computer one JPEG. 78 00:05:46,970 --> 00:05:49,430 So let me add here one more forward slash. 79 00:05:49,730 --> 00:05:51,500 And you know, it's not going to be column actually. 80 00:05:51,890 --> 00:05:53,570 I'm just going to add here a plus. 81 00:05:53,900 --> 00:05:59,820 I'm going to be looking for template strength and access the product image first. 82 00:05:59,830 --> 00:06:04,210 So product and image and I'm looking for a name. 83 00:06:04,760 --> 00:06:05,750 So that's my image. 84 00:06:05,980 --> 00:06:09,690 I'm just looking here for this name, let me say it. 85 00:06:09,710 --> 00:06:11,900 So that's going to be my path. 86 00:06:11,900 --> 00:06:13,370 And now what we want to do. 87 00:06:14,370 --> 00:06:21,600 Is to run the malfunction, so let's go with a wait, because we can either use the callback or it returns 88 00:06:21,600 --> 00:06:22,470 a promise. 89 00:06:22,890 --> 00:06:30,240 So let's just take a wait and froud since we have a sink and let's just go with product image, then 90 00:06:30,240 --> 00:06:33,870 move function and now let's pass in the image path. 91 00:06:34,230 --> 00:06:36,510 So let's go here with image path. 92 00:06:36,510 --> 00:06:42,660 Let's save it then I'll make this one smaller and will now get back. 93 00:06:42,870 --> 00:06:44,160 Let's try it one more time. 94 00:06:44,460 --> 00:06:45,510 Let's send it. 95 00:06:45,810 --> 00:06:49,350 And now it complains that well, there is no directory. 96 00:06:49,650 --> 00:06:54,710 So we need to do is go back to the public and let's create that directory. 97 00:06:54,990 --> 00:07:01,530 It's a new folder and we're going to be looking for uploads unless it also showcases if we're going 98 00:07:01,530 --> 00:07:06,870 to have some kind of error, because remember, we have that wrapper for all the errors in this case. 99 00:07:07,230 --> 00:07:13,170 This is the error that we're getting from the library basically right away tells us, hey, listen, 100 00:07:13,410 --> 00:07:15,840 there is no directory uploads. 101 00:07:16,140 --> 00:07:19,050 So let's try one more time where we already have the uploads. 102 00:07:19,050 --> 00:07:24,690 And again, in my case, that is in public, if you want to create a separate directory, you can definitely 103 00:07:24,690 --> 00:07:25,020 do so. 104 00:07:25,020 --> 00:07:29,770 Just make sure the path is correct, one not the same as mine. 105 00:07:30,570 --> 00:07:31,950 And now let's try one more time. 106 00:07:32,170 --> 00:07:35,880 I'm not getting any error messages, which is already good sign. 107 00:07:36,120 --> 00:07:37,790 And I'll take a look at the uploads. 108 00:07:38,010 --> 00:07:39,150 What do you see over here? 109 00:07:39,450 --> 00:07:43,890 You see a computer and now I want to do two things. 110 00:07:44,340 --> 00:07:52,350 First, I want to make sure that the public one is publicly available, meaning it is my static assets. 111 00:07:52,560 --> 00:07:53,460 That's number one. 112 00:07:53,760 --> 00:07:58,350 And second thing, we want to send that back with correct path. 113 00:07:58,830 --> 00:08:01,560 And I think I can start with a path. 114 00:08:02,480 --> 00:08:04,360 So let's just go right after a wait. 115 00:08:04,430 --> 00:08:14,060 I want to go here with a return address and we're looking for a status status and will pass in the status 116 00:08:14,060 --> 00:08:17,390 code and we'll pass in the OK. 117 00:08:17,990 --> 00:08:23,740 And as far as the JSON, well, this is the interesting part where we want to go with some kind of property. 118 00:08:23,750 --> 00:08:30,100 In my case, it's going to be a image and this is where I will set it up as an object of source. 119 00:08:30,500 --> 00:08:33,770 And this is where I really want to set up the path again. 120 00:08:33,780 --> 00:08:41,330 We'll use the template string because I'll set up upload and I'll talk about why this path is so short 121 00:08:41,809 --> 00:08:42,850 in the next video. 122 00:08:43,159 --> 00:08:45,320 So let's go here with uploads. 123 00:08:46,230 --> 00:08:52,800 Then forward slash and we're looking for the same thing, we're looking for the name because that's 124 00:08:52,800 --> 00:08:54,730 how we set it up on a server. 125 00:08:55,020 --> 00:09:00,420 So let's go here with product image and let's access the name properly. 126 00:09:00,730 --> 00:09:05,480 That should do it and let's save it before we can do anything. 127 00:09:05,730 --> 00:09:11,020 We also want to go to app jazz and right above the Express. 128 00:09:11,040 --> 00:09:16,320 Jason, we want to make that public one available as our static assets. 129 00:09:16,620 --> 00:09:17,490 How do we do that? 130 00:09:17,520 --> 00:09:23,890 Well, we just go with express static and we point to a folder that we want to make publicly available. 131 00:09:24,210 --> 00:09:25,980 So let's go here, have that use. 132 00:09:26,910 --> 00:09:34,200 And then we're looking for express of static and then let's just point to her folder, which is going 133 00:09:34,200 --> 00:09:35,880 to be our public one. 134 00:09:36,300 --> 00:09:39,990 Let's save it first before we send anything from the postman. 135 00:09:40,350 --> 00:09:42,650 Simply can go to our local host. 136 00:09:43,020 --> 00:09:50,640 Three thousand and we're looking for it uploads one and there should be a computer one jpeg. 137 00:09:50,860 --> 00:09:52,680 So let's just take a look at the uploads. 138 00:09:52,720 --> 00:09:56,500 The moment it complains that there is no such folder. 139 00:09:56,790 --> 00:09:57,600 That's fine. 140 00:09:57,910 --> 00:09:59,580 We're looking for here and you're not. 141 00:09:59,880 --> 00:10:02,220 Let me just send it back and then we'll see. 142 00:10:02,520 --> 00:10:04,090 So let me send it here now. 143 00:10:04,770 --> 00:10:07,110 This is the data that I'm sending back. 144 00:10:07,380 --> 00:10:08,440 OK, awesome. 145 00:10:08,700 --> 00:10:14,930 Now we want to go here, take this path and we'll see that it's going to be publicly available. 146 00:10:15,270 --> 00:10:21,900 So right after my three thousand on hold that we're just going to go with uploads and we want to copy 147 00:10:21,900 --> 00:10:27,780 and paste that string and what are you know, now my image is on the server. 148 00:10:28,050 --> 00:10:30,750 So now what happens back in the post? 149 00:10:30,750 --> 00:10:32,790 Man, I can take this one. 150 00:10:33,150 --> 00:10:38,990 I can take the source and I can add it when I'm creating the product. 151 00:10:39,600 --> 00:10:47,970 So first I upload the image, I get the correct path and I'll talk about then why this path is so short 152 00:10:48,300 --> 00:10:49,260 in the next video. 153 00:10:49,440 --> 00:10:56,940 And then once I have the path, then I can create a product because now I have the correct string that 154 00:10:56,940 --> 00:11:00,480 points to the image that is sitting on a server. 155 00:11:00,750 --> 00:11:05,460 And since we made it publicly available, anyone can access that image.