1 00:00:09,040 --> 00:00:10,180 In this video. 2 00:00:10,180 --> 00:00:15,250 Let's get started with our project and the file upload. 3 00:00:15,460 --> 00:00:20,860 And you are going to upload files from the client side that is the browser. 4 00:00:20,860 --> 00:00:27,490 And then we sit into cloud nine and then we save the link into our database. 5 00:00:27,490 --> 00:00:30,880 And lastly, we will display it on the page. 6 00:00:30,880 --> 00:00:34,060 So let's see how we are going to implement that. 7 00:00:34,240 --> 00:00:41,950 We are going to use the same template or our previous project to finish up for rendering templates like 8 00:00:41,950 --> 00:00:42,670 this one. 9 00:00:42,670 --> 00:00:50,050 We have covered it in details, so I assumed that you knew how to render some templates. 10 00:00:50,290 --> 00:00:59,590 This route is for the homepage and then this route slash upload which is get render a form for upload. 11 00:00:59,590 --> 00:01:07,540 So when I click on upload, you see that I get the form to upload and this handle to get it done. 12 00:01:07,810 --> 00:01:14,410 And this post requests as you saw, make the actual request to Cloudera to upload. 13 00:01:14,530 --> 00:01:19,810 And then this route is for rendering all the images on the page. 14 00:01:19,810 --> 00:01:27,730 So let's get started with the implementation for this project, we are 99% done. 15 00:01:27,730 --> 00:01:34,270 What has left is to connect the client to the back end and that is all and you need to save the file 16 00:01:34,270 --> 00:01:35,530 into MongoDB. 17 00:01:35,680 --> 00:01:42,490 So let's see how so let's get back to the form where we are uploading, which is the upload. 18 00:01:42,490 --> 00:01:45,670 And let me show you some of the important attributes here. 19 00:01:45,910 --> 00:01:53,800 The first one is action and it goes to the post route for the upload and the method is posts and you 20 00:01:53,800 --> 00:01:58,690 need to provide the end type which is multipart form data. 21 00:01:58,840 --> 00:02:07,120 With this one, we are telling Express that the kind of data that we are sending is of type for data. 22 00:02:07,570 --> 00:02:14,170 Inside the input we have an attribute called name with a value called file. 23 00:02:14,200 --> 00:02:21,910 The value here is what we need to pass in to Malta when we are configuring it, which is this one as 24 00:02:21,910 --> 00:02:28,540 you saw in the previous video, and the same thing that we did when we are making the request from Postman 25 00:02:28,720 --> 00:02:30,580 and that's all what we need. 26 00:02:30,580 --> 00:02:37,990 So if I make a request, you can see that I'm going to send that file to Cloud Neri and that is it. 27 00:02:37,990 --> 00:02:46,510 So now let's get back to the form here and when I open it and then click on this file, let me select 28 00:02:46,510 --> 00:02:50,980 this file and then hit send and click on upload. 29 00:02:51,130 --> 00:02:58,840 You can see that it is pinning and now I get a message that file uploaded successfully if I check my 30 00:02:58,840 --> 00:03:04,330 terminal here, let's see the magic here and we have it. 31 00:03:04,330 --> 00:03:12,520 So what has left is we need to save this one to MongoDB and that is it and that is it. 32 00:03:12,520 --> 00:03:14,020 So let's see. 33 00:03:14,050 --> 00:03:24,310 So back to our config or our model, you can see that I have a model called Gallery and for this I provided 34 00:03:24,310 --> 00:03:30,700 only one field code name going to be the name of the image or the string of the image. 35 00:03:30,700 --> 00:03:35,230 It can be anything here and then I export it as that. 36 00:03:35,230 --> 00:03:39,280 So now inside the server I need that model. 37 00:03:39,280 --> 00:03:41,290 So here we go. 38 00:03:41,290 --> 00:03:47,050 Let me require the gallery model and I have the auto import. 39 00:03:47,050 --> 00:03:48,700 I'll start now. 40 00:03:48,700 --> 00:03:53,830 Let's remove this one and let's get into the route for upload. 41 00:03:53,860 --> 00:03:57,790 Here we have the actual link on the path. 42 00:03:57,790 --> 00:04:02,350 So let's see the property we are going to get, which is on the path. 43 00:04:02,350 --> 00:04:04,450 So file that path. 44 00:04:04,450 --> 00:04:09,040 We have this link, so let's go back to the route. 45 00:04:09,040 --> 00:04:11,530 So here we go. 46 00:04:12,070 --> 00:04:18,700 So after we get the file, so let's assign to a variable called file which is equal to. 47 00:04:19,680 --> 00:04:20,670 Rick. 48 00:04:21,120 --> 00:04:23,190 Dart file. 49 00:04:23,220 --> 00:04:24,960 Dart path. 50 00:04:25,630 --> 00:04:28,960 And that's a power you got from ordinary. 51 00:04:28,990 --> 00:04:32,090 Next is I want to save this one to MongoDB. 52 00:04:32,110 --> 00:04:39,850 So have mark my function as an async and let's make use of try and catch here because we want to talk 53 00:04:39,850 --> 00:04:42,670 to Cloudera and MongoDB. 54 00:04:42,700 --> 00:04:43,810 So here we go. 55 00:04:43,810 --> 00:04:49,600 Const and then gallery or picture is equal to. 56 00:04:52,830 --> 00:05:00,120 Gallery model dot crates and then I'll provide name which. 57 00:05:03,470 --> 00:05:09,740 Which is the fire I want to save, which is a string, and that is it. 58 00:05:10,100 --> 00:05:18,740 After creating, I want to send the user to this page called Images, which is four slash images, this 59 00:05:18,740 --> 00:05:19,250 page. 60 00:05:19,370 --> 00:05:31,670 So after creating red dot render and the templates is called images and if something goes wrong, let's 61 00:05:31,670 --> 00:05:33,200 just send some text. 62 00:05:34,770 --> 00:05:39,840 And send the error to the page or let's say something went wrong. 63 00:05:48,530 --> 00:05:49,070 Okay. 64 00:05:49,070 --> 00:05:51,460 So now let's have a look. 65 00:05:51,470 --> 00:05:53,720 Let's console.log the. 66 00:05:55,070 --> 00:05:56,620 Saved image call. 67 00:05:56,630 --> 00:05:58,440 Pick up picture now. 68 00:05:58,460 --> 00:05:59,770 Moment of truth. 69 00:05:59,780 --> 00:06:06,450 Let's get back to the form and click on upload and let select image that you want to upload. 70 00:06:06,470 --> 00:06:09,650 Let's see this one and upload. 71 00:06:09,680 --> 00:06:10,840 Let's see. 72 00:06:10,850 --> 00:06:14,120 It is going to take us to a we have it. 73 00:06:14,120 --> 00:06:16,820 So let's check our you get something. 74 00:06:16,820 --> 00:06:23,240 I get what is called pending meaning I need to await my requests. 75 00:06:23,480 --> 00:06:24,440 Sorry guys. 76 00:06:24,440 --> 00:06:27,650 I need to await and save it. 77 00:06:27,650 --> 00:06:35,360 And let's try again upload and let's select this image and click on that and upload. 78 00:06:35,600 --> 00:06:36,470 Let's see. 79 00:06:37,450 --> 00:06:40,750 Well, I guess something went wrong again. 80 00:06:41,260 --> 00:06:42,070 Oh, sorry. 81 00:06:42,080 --> 00:06:47,020 We need to connect to MongoDB because we are not calling the function to connect. 82 00:06:47,050 --> 00:06:48,240 Sorry, guys. 83 00:06:48,250 --> 00:06:55,810 So let's come back here and then require the db connect or connect db. 84 00:07:00,050 --> 00:07:03,300 And I start and let me call it as that. 85 00:07:03,320 --> 00:07:08,970 So now let's save it and let's make sure that DB has connected and indeed connected. 86 00:07:08,990 --> 00:07:13,550 So let's get back to the page and make requests again. 87 00:07:13,760 --> 00:07:16,160 This time around, I guess something correct. 88 00:07:16,190 --> 00:07:24,830 A I have it here as that if I check my MongoDB using this extension as we discussed before. 89 00:07:24,860 --> 00:07:32,510 Now let me click on that and let's see the image that has been saved into my MongoDB. 90 00:07:32,630 --> 00:07:36,560 Now let me see the collection under block. 91 00:07:36,560 --> 00:07:38,000 I think the name is blocked. 92 00:07:38,060 --> 00:07:42,650 Let me see the name of the connection, which is tests. 93 00:07:42,650 --> 00:07:44,540 So it is test collection. 94 00:07:44,540 --> 00:07:52,540 So under this one we see we have the gallery and one document and this is an image from Cloud Neri. 95 00:07:52,550 --> 00:07:58,190 So let's go ahead and upload one more or two more. 96 00:07:58,220 --> 00:08:02,960 Let me select this one or this one or this. 97 00:08:03,200 --> 00:08:03,740 Yeah. 98 00:08:03,740 --> 00:08:09,920 And let me hit send and upload a we have it now. 99 00:08:09,920 --> 00:08:11,750 Everything is working fine. 100 00:08:11,780 --> 00:08:16,370 The next step is we need to fetch and populate onto the page. 101 00:08:16,370 --> 00:08:19,790 And for this one too, we have done it many times. 102 00:08:19,790 --> 00:08:22,150 So it's going to be pretty simple, right? 103 00:08:22,160 --> 00:08:29,080 So let's get back to the server and where we have the root which gets images. 104 00:08:29,090 --> 00:08:36,440 This is a route, so let's go ahead and then fetch all the images from our database. 105 00:08:36,440 --> 00:08:39,370 So let's make use of try and catch again. 106 00:08:39,830 --> 00:08:46,160 If something went wrong, you're going to say st something went wrong. 107 00:08:46,940 --> 00:08:50,480 Let me cut this one and then put it inside here. 108 00:08:50,510 --> 00:08:55,490 So let's go ahead and make requests to MongoDB to fetch all images. 109 00:08:55,490 --> 00:09:03,440 So const images is equal to our with our gallery and then dirt fine. 110 00:09:06,070 --> 00:09:06,760 As that. 111 00:09:06,760 --> 00:09:11,890 And next is our pass as a second argument to this template called images. 112 00:09:12,160 --> 00:09:21,610 So if I console.log images here, let's see if you're going to get that before we display them. 113 00:09:21,610 --> 00:09:27,040 So let me go to slash images and I have the images here. 114 00:09:27,070 --> 00:09:36,130 So let me check my terminal and you can see that I have all the images from my database, how awesome 115 00:09:36,130 --> 00:09:36,850 it is. 116 00:09:36,850 --> 00:09:41,500 So now on the templates, I can go ahead and look through that. 117 00:09:41,500 --> 00:09:44,160 So inside the images template here. 118 00:09:44,230 --> 00:09:48,670 Now let's see how we can look through inside this container. 119 00:09:48,670 --> 00:09:54,070 We are displaying some static images, so instead we are going to remove everything. 120 00:09:54,070 --> 00:10:01,450 And remember we've talked about how we can look through data inside ugg's template to. 121 00:10:06,890 --> 00:10:12,800 Let me maintain only one because I need one to have the structure. 122 00:10:13,310 --> 00:10:13,640 Good. 123 00:10:13,640 --> 00:10:18,180 So it has left with only one, which is this one, this card. 124 00:10:18,200 --> 00:10:22,790 So what I'm going to do is that I'm going to cut everything from here. 125 00:10:23,030 --> 00:10:26,870 And on a template I have what is called the images. 126 00:10:26,870 --> 00:10:32,090 So going to be as images dot for each. 127 00:10:35,740 --> 00:10:38,620 And I have access to individual images. 128 00:10:39,820 --> 00:10:42,280 And inside outpace that. 129 00:10:42,370 --> 00:10:47,590 And I need to wrap this one inside Exxon tax. 130 00:10:49,160 --> 00:10:51,860 And down here also. 131 00:10:52,760 --> 00:10:56,750 So let's save it and let's refresh it. 132 00:10:57,170 --> 00:10:59,420 Well, I get some error. 133 00:10:59,450 --> 00:11:03,340 Let's check it out and see where it's supposed to be. 134 00:11:03,350 --> 00:11:04,700 Images. 135 00:11:05,150 --> 00:11:07,220 All right, so let's refresh it. 136 00:11:07,490 --> 00:11:10,580 And indeed, we have three images. 137 00:11:10,580 --> 00:11:14,960 So now let's use the images from our database. 138 00:11:14,960 --> 00:11:21,560 So let's remove the value for source and let's use our own image. 139 00:11:21,590 --> 00:11:28,340 Is it going to be just equal to post dot name? 140 00:11:28,370 --> 00:11:30,490 That is the name of the image. 141 00:11:30,500 --> 00:11:32,510 Now let's refresh it. 142 00:11:33,430 --> 00:11:34,570 Something is coming. 143 00:11:34,600 --> 00:11:36,300 Hey, guys. 144 00:11:36,310 --> 00:11:37,330 There you go. 145 00:11:37,360 --> 00:11:48,700 So let's go ahead and upload more images from let's say I want this one brand an Ike and well, I got 146 00:11:48,730 --> 00:11:50,090 reference error. 147 00:11:50,110 --> 00:11:51,940 Image is not defined. 148 00:11:52,240 --> 00:12:00,040 This error simply means that by the time we hit the endpoint for render images at that time there is 149 00:12:00,040 --> 00:12:04,510 no value being passed to the template core images. 150 00:12:04,510 --> 00:12:11,830 So at this point there is no value on the images and we are trying to use what is called for each on 151 00:12:11,830 --> 00:12:12,220 it. 152 00:12:12,490 --> 00:12:17,530 So for this we can use what is called optional tuning by using the question mark. 153 00:12:17,530 --> 00:12:20,900 And for the post tool we are using question mark. 154 00:12:20,920 --> 00:12:28,450 This simply means that if there are some images, then go ahead and use the for edge on it, otherwise 155 00:12:28,450 --> 00:12:29,200 ignored. 156 00:12:29,260 --> 00:12:35,510 So let me change this one to IMG to be more specific as I am. 157 00:12:35,510 --> 00:12:37,990 IMG All right, so let's save it. 158 00:12:37,990 --> 00:12:46,480 And now let's refresh it now let's go home again and then let's refresh the entire page differently. 159 00:12:46,480 --> 00:12:52,570 We are going to see the image that we uploaded and here we go. 160 00:12:52,600 --> 00:12:55,510 We can see that we have uploaded multiple times. 161 00:12:55,750 --> 00:12:58,030 So that is pretty much of it. 162 00:12:58,030 --> 00:13:05,950 And this application to is responsive so we can put it on a portfolio and here we go. 163 00:13:05,980 --> 00:13:13,750 Now we are able to build real world application where we can upload file to cloud to DB and then we 164 00:13:13,750 --> 00:13:14,770 display it. 165 00:13:14,770 --> 00:13:15,940 That's great.