1 00:00:09,760 --> 00:00:10,900 In this video. 2 00:00:10,930 --> 00:00:14,760 Let's see how we can upload files to Cloud Neri. 3 00:00:14,770 --> 00:00:16,420 So let's get started. 4 00:00:16,660 --> 00:00:24,010 The first step is we need to log in and if you don't have an account then let's go ahead and click on 5 00:00:24,010 --> 00:00:28,710 sign up and you can sign up with your Gmail account. 6 00:00:28,720 --> 00:00:31,300 So let me click on that and. 7 00:00:32,740 --> 00:00:34,240 Here we go. 8 00:00:34,450 --> 00:00:38,560 The next step is I need to choose my role. 9 00:00:38,590 --> 00:00:42,250 I'm a developer and I'll click next. 10 00:00:42,640 --> 00:00:47,910 And then the next step is build a new website or app or products. 11 00:00:47,920 --> 00:00:51,760 Yes, I'll click on that and then click done. 12 00:00:52,540 --> 00:00:54,550 And here we go. 13 00:00:54,580 --> 00:00:56,370 Welcome to Cloud. 14 00:00:57,160 --> 00:01:04,300 All what we need from cloud binary is the API key and then cloud name. 15 00:01:04,390 --> 00:01:08,230 So let's click on start the configuration. 16 00:01:08,530 --> 00:01:15,940 You can see that they have SDK for almost all the programming languages, Node.js or React and many 17 00:01:15,940 --> 00:01:16,420 more. 18 00:01:16,450 --> 00:01:19,540 So let's click on Node.js and then let's click then. 19 00:01:19,540 --> 00:01:22,540 So this is your API key. 20 00:01:22,540 --> 00:01:25,860 So I'll click on copying and then done. 21 00:01:25,870 --> 00:01:32,920 So the next step is if you click on Media Library, I'm going to see all the images that it has been 22 00:01:32,920 --> 00:01:33,850 uploaded. 23 00:01:33,850 --> 00:01:37,030 So by default, this is what I have. 24 00:01:37,390 --> 00:01:38,260 All right. 25 00:01:38,260 --> 00:01:40,450 And they're giving us a sample folder. 26 00:01:40,780 --> 00:01:43,770 We are going to use our code to create folders. 27 00:01:43,780 --> 00:01:49,730 So let's go ahead and then configure our server to use cloud binary. 28 00:01:49,750 --> 00:01:58,420 Well, we are not going to use Malta anymore with this code, so let's remove Malta here and we need 29 00:01:58,420 --> 00:01:59,080 the package. 30 00:01:59,080 --> 00:02:07,210 I will show you and let's go ahead and create a configuration file as we see here and inside, let's 31 00:02:07,210 --> 00:02:09,310 create cloud binary. 32 00:02:11,330 --> 00:02:13,100 Dot js. 33 00:02:13,460 --> 00:02:18,950 Let's remove this folder that contains the images from motor. 34 00:02:19,340 --> 00:02:23,990 So let me page the code I copied and I'll come back to it very soon. 35 00:02:24,680 --> 00:02:29,890 The next step is we need to install the NPM package for cloud nine. 36 00:02:29,900 --> 00:02:38,030 So let's open the terminal and let's install John at Cloud Binary. 37 00:02:38,300 --> 00:02:45,740 Make sure you install the exact version 1.31.0 and hit enter. 38 00:02:45,740 --> 00:02:49,130 Now Cloudera is installing. 39 00:02:49,250 --> 00:02:56,900 Now let's get back to server because I remove more to this code is not running anymore so let's remove 40 00:02:56,900 --> 00:03:00,140 that and let's wait for cloud binary. 41 00:03:00,170 --> 00:03:05,750 Now let's go ahead and configure while Cloudera is installing. 42 00:03:05,990 --> 00:03:12,690 So let's bring in the package that we are installing and here we go. 43 00:03:12,710 --> 00:03:20,630 Const cloud binary is equal to required cloud binary. 44 00:03:21,830 --> 00:03:25,010 Make sure you add Virgin 2 to 8. 45 00:03:25,040 --> 00:03:28,490 Now we have required the package. 46 00:03:28,910 --> 00:03:36,800 The next step is we are going to install a package called motor storage cloud. 47 00:03:37,700 --> 00:03:44,570 Without that package, unless you go through the manual configuration when using motor in the previous 48 00:03:44,570 --> 00:03:50,900 video where we are going to implement the file filter, how we are going to limit some file size. 49 00:03:50,900 --> 00:03:54,560 But with this package, our life is going to be easier. 50 00:03:54,560 --> 00:03:56,100 And let me show you. 51 00:03:56,120 --> 00:03:58,430 So back to the terminal. 52 00:03:58,460 --> 00:04:04,100 Let's go ahead and install a package called Motor Cloud. 53 00:04:04,100 --> 00:04:04,580 NARRATOR. 54 00:04:04,670 --> 00:04:06,410 So here we go. 55 00:04:06,440 --> 00:04:15,980 We can make use of NPM or yarn and make use of yarn and then add motor dash. 56 00:04:16,279 --> 00:04:18,769 Storage dash. 57 00:04:18,980 --> 00:04:19,790 Cloud. 58 00:04:19,790 --> 00:04:20,510 Ordinary. 59 00:04:20,630 --> 00:04:25,190 Now make sure you install the version 4.0.0. 60 00:04:25,220 --> 00:04:26,090 Hit enter. 61 00:04:26,120 --> 00:04:28,430 Now it's installing. 62 00:04:28,460 --> 00:04:34,640 The next step is let's go ahead and configure motor to use cloud. 63 00:04:34,640 --> 00:04:35,290 NARRATOR. 64 00:04:35,330 --> 00:04:40,460 Let's run the server to make sure that everything is perfect. 65 00:04:40,490 --> 00:04:43,610 Now our server is running. 66 00:04:43,700 --> 00:04:53,930 So let's go ahead and then require the package core motor cloud ordinary and is equal to required going 67 00:04:53,930 --> 00:04:58,160 to be motor storage cloud ordinary. 68 00:04:58,220 --> 00:04:58,780 Good. 69 00:04:58,790 --> 00:05:01,820 So let's go ahead to configure it. 70 00:05:02,030 --> 00:05:07,220 So down here, let's have a comment by saying instance. 71 00:05:09,190 --> 00:05:11,260 Of Cloud Nary. 72 00:05:12,310 --> 00:05:13,420 Storage. 73 00:05:13,420 --> 00:05:14,530 So here we go. 74 00:05:14,560 --> 00:05:15,640 Cost. 75 00:05:16,800 --> 00:05:19,590 Storage is equal to nil. 76 00:05:19,620 --> 00:05:27,690 Make sure we import all we required what is called Cloud Neri because we have couple of methods inside 77 00:05:27,690 --> 00:05:31,950 this one and what we want is called the cloud storage. 78 00:05:31,970 --> 00:05:33,330 Going to be cloud. 79 00:05:33,330 --> 00:05:40,350 Ordinary storage with this package is going to take away all the complexity from us. 80 00:05:40,350 --> 00:05:47,700 For example, if you want to create folder into cloud array or if you want to accept some file limits, 81 00:05:47,700 --> 00:05:50,700 we are going to use this one to make it pretty easy. 82 00:05:50,790 --> 00:05:58,320 So inside this one, we are going to pass in some configuration and we are going to use what is called 83 00:05:58,320 --> 00:06:06,690 Cloud Neri and you are going to use the package from Cloud Neri and I can make use of Cloud Neri and 84 00:06:06,690 --> 00:06:07,770 from Essex. 85 00:06:07,770 --> 00:06:12,390 If the value and the property are the same, we can choose to write one. 86 00:06:12,390 --> 00:06:13,140 Now. 87 00:06:13,140 --> 00:06:20,190 The next property is going to be a folder, meaning a folder where I want to save these images and I'll 88 00:06:20,190 --> 00:06:23,340 call this one as node JS. 89 00:06:25,520 --> 00:06:31,100 Next is I need to provide the kind of files that I want to support. 90 00:06:31,100 --> 00:06:34,580 So I'm going to be as a allowed format. 91 00:06:34,700 --> 00:06:37,370 So provide as a loud. 92 00:06:38,280 --> 00:06:39,210 Format. 93 00:06:41,110 --> 00:06:52,780 And for this one I want to accept only jpg and then P and G and the nest egg remains is going to be 94 00:06:52,780 --> 00:06:53,680 params. 95 00:06:53,830 --> 00:07:01,660 So inside the params we are going to specify if we want to transform an image to a specific size, let's 96 00:07:01,660 --> 00:07:11,290 say 200 by 200, we are going to use what is called transformation inside this going to be as transformation. 97 00:07:12,630 --> 00:07:16,260 And then provide us an array with a key value pair. 98 00:07:16,290 --> 00:07:21,420 If you want to have square image, going to be with going to be 500. 99 00:07:21,540 --> 00:07:28,070 And then height is also going to be as 500. 100 00:07:28,080 --> 00:07:32,460 And then the next one going to be crop to limit. 101 00:07:33,230 --> 00:07:34,420 Now we are done. 102 00:07:34,430 --> 00:07:39,920 The next step is I need to export this function from this file. 103 00:07:41,200 --> 00:07:45,310 Mojo dot exports equal to the storage. 104 00:07:45,430 --> 00:07:48,140 Now back to our server. 105 00:07:48,160 --> 00:07:50,260 I need to require that. 106 00:07:50,260 --> 00:07:53,890 So I'm going to require the storage. 107 00:07:54,190 --> 00:08:00,940 So in here I'll make use of costs and then storage equal to required. 108 00:08:01,360 --> 00:08:07,270 And it is inside my config folder and I have my cloud binary. 109 00:08:07,570 --> 00:08:13,390 And next step is let's create instance of mortar and pass in the storage. 110 00:08:13,390 --> 00:08:15,430 And that is all. 111 00:08:15,610 --> 00:08:22,720 So before my roots that is this one configure mortar. 112 00:08:27,670 --> 00:08:32,020 And making use of cost upload. 113 00:08:33,820 --> 00:08:38,919 Equal to mortar and provide storage. 114 00:08:39,190 --> 00:08:47,830 Are going to use the mortar cloud energy storage as that and this is the same as this and we are done. 115 00:08:48,130 --> 00:08:56,290 The next step is I need to pass into the handler, which is this one upload dot single and then provide 116 00:08:56,320 --> 00:08:59,740 the field name co file and that is it. 117 00:08:59,950 --> 00:09:04,990 So if I console.log the file, I'm going to see a link from cloud. 118 00:09:04,990 --> 00:09:07,510 NARRATOR Moments of truth. 119 00:09:07,540 --> 00:09:09,880 So back to postman. 120 00:09:11,050 --> 00:09:13,870 Let's go ahead and send this request. 121 00:09:13,900 --> 00:09:15,790 Now it is loading. 122 00:09:15,850 --> 00:09:21,190 Let's check our Termina to make sure that it has console.log IDs. 123 00:09:21,610 --> 00:09:26,140 And, guys, here is the path. 124 00:09:26,500 --> 00:09:28,930 Hey, we got it. 125 00:09:28,960 --> 00:09:38,860 You can see that if I copy this one and then go to my browser and then paste it, let's see the image. 126 00:09:39,820 --> 00:09:46,540 A This is the image I uploaded if I refresh my dashboard. 127 00:09:46,570 --> 00:09:50,590 Let's see the folder and the images I have uploaded. 128 00:09:50,860 --> 00:09:53,260 And here we go. 129 00:09:53,260 --> 00:09:55,030 We have the image. 130 00:09:55,030 --> 00:09:57,220 How easy it is. 131 00:09:57,610 --> 00:10:01,290 Well, for some reasons, the folder couldn't create. 132 00:10:01,300 --> 00:10:03,190 So what is the problem? 133 00:10:03,250 --> 00:10:04,870 Let's check our code. 134 00:10:05,630 --> 00:10:07,460 Well, sorry, guys. 135 00:10:07,580 --> 00:10:08,600 This one. 136 00:10:08,600 --> 00:10:11,870 The folder must be in the params. 137 00:10:11,870 --> 00:10:12,670 Sorry, guys. 138 00:10:12,740 --> 00:10:15,590 So here when I be the folder. 139 00:10:15,620 --> 00:10:19,340 Now let's go ahead and make a request again. 140 00:10:19,610 --> 00:10:24,200 Now, let me change the file and use different file. 141 00:10:24,200 --> 00:10:25,830 And let's see. 142 00:10:25,850 --> 00:10:33,050 Let me select the large file and send and we have the file as that. 143 00:10:33,050 --> 00:10:37,970 So let's refresh and let's see if you're going to see the folder. 144 00:10:40,750 --> 00:10:44,740 And indeed we have the folder which is Node.js. 145 00:10:44,740 --> 00:10:51,790 And inside I have one image inside that and here is the image. 146 00:10:51,800 --> 00:10:59,220 So what has left is that we are going to take the link and then save into MongoDB. 147 00:10:59,260 --> 00:11:02,080 That's what we are going to do, guys. 148 00:11:02,080 --> 00:11:03,820 And then pretty simple. 149 00:11:03,820 --> 00:11:10,060 So what we are going to do is that we are going to start with our projects where we are going to use 150 00:11:10,060 --> 00:11:18,220 a browser to upload images to cloud ordinary and then we fetch it and display it inside our browser.