1
00:00:01,080 --> 00:00:07,570
And once the config is in place next, we want to head on over to uploads controller.

2
00:00:08,070 --> 00:00:10,690
I will leave this one for your friends.

3
00:00:11,220 --> 00:00:18,210
So in this case, I'm just going to call this upload product image and I'm just going to add here local

4
00:00:18,780 --> 00:00:21,570
and I'm going to create the same function.

5
00:00:21,930 --> 00:00:24,900
Basically, the name is going to be exactly the same part.

6
00:00:24,900 --> 00:00:27,140
Functionality is going to be for the cloud Naree.

7
00:00:27,350 --> 00:00:32,490
Again, this is just for your reference, and since I don't want to change my import and all that,

8
00:00:32,820 --> 00:00:34,710
I'm just going to collapse this one.

9
00:00:34,920 --> 00:00:36,690
So we have a little bit more realistic.

10
00:00:37,050 --> 00:00:40,400
And let's just go here with const upload again.

11
00:00:40,410 --> 00:00:43,440
The name is going to be exactly the same product image.

12
00:00:43,450 --> 00:00:50,640
It's going to be my async function and or as I'm not in function, but this is where I'll set everything

13
00:00:50,640 --> 00:00:50,890
up.

14
00:00:51,240 --> 00:00:57,740
Now, before we can do anything, what's necessary is the import again for cloud memory.

15
00:00:58,110 --> 00:01:01,040
And let me just double check here and I have the error.

16
00:01:01,050 --> 00:01:01,430
Yep.

17
00:01:01,440 --> 00:01:02,490
And I fixed everything.

18
00:01:02,670 --> 00:01:08,370
So up on the top we want to go with Consed and again we're looking for Cloud Nahrin this time.

19
00:01:08,370 --> 00:01:16,500
As you can see, I spelled it correctly, we're looking for require and again the package name and must,

20
00:01:16,500 --> 00:01:19,680
must, must, must must add version to.

21
00:01:19,980 --> 00:01:21,060
Please don't forget that.

22
00:01:21,540 --> 00:01:30,990
And then in this function when we want to do is call cloud Narey uploader and upload and this is going

23
00:01:30,990 --> 00:01:33,990
to be equal to your result and then we'll send this one back.

24
00:01:34,380 --> 00:01:36,290
So let's go over here in seconds.

25
00:01:36,720 --> 00:01:41,550
Result is equal to and then we can stick a weight in.

26
00:01:42,120 --> 00:01:50,070
So basically we'll wait for this one to complete and then we go with our variable name Cloud Nory uploader.

27
00:01:50,400 --> 00:01:52,650
And then the method is upload.

28
00:01:52,950 --> 00:01:59,190
Now, this upload method, first argument that it's looking for is the path for image.

29
00:02:00,060 --> 00:02:01,560
Now, where do we have our images?

30
00:02:02,010 --> 00:02:08,850
Well, we have them in the public and then in the uploads part here is the million dollar question.

31
00:02:09,060 --> 00:02:17,010
Does that mean that every time we want to store the image on cloud nine, we need to do this whole song

32
00:02:17,010 --> 00:02:21,800
and that where we check for the images, then we upload them and all that.

33
00:02:22,320 --> 00:02:26,790
And like a lot of times in this course, the answer is yes or no.

34
00:02:27,270 --> 00:02:33,750
First of all, there is another option where we can do it by using the streams, but we're not going

35
00:02:33,750 --> 00:02:34,350
to cover that.

36
00:02:34,530 --> 00:02:38,270
This example kind of don't want to spend too much time on this one.

37
00:02:38,280 --> 00:02:45,450
So that's why we'll go with a second option where, yes, we will get the images that are stored on

38
00:02:45,450 --> 00:02:53,130
our server, but we will just use temporary storage that comes with the previous package that we used.

39
00:02:53,340 --> 00:02:57,030
This one, the express file upload.

40
00:02:57,360 --> 00:02:59,940
So to cut the story short.

41
00:03:00,810 --> 00:03:08,880
In order to use Cloud9 in our setup, you still need this one, you'll need Xpress file upload for two

42
00:03:08,880 --> 00:03:09,300
reasons.

43
00:03:09,750 --> 00:03:14,970
Basically, it's going to parse that file that's coming in the image file, and then it's also going

44
00:03:14,970 --> 00:03:20,640
to set up a temp directory so we can access nicely with a cloud.

45
00:03:20,640 --> 00:03:25,170
And those files send them out and then we'll send back the response.

46
00:03:25,360 --> 00:03:28,710
So first, we want to navigate back to abcess.

47
00:03:29,280 --> 00:03:31,740
And where do you have the file upload?

48
00:03:31,890 --> 00:03:33,390
You can pass in the options.

49
00:03:33,780 --> 00:03:40,200
So let me find the file upload first where I set it up over here and learn what you want to do is pass

50
00:03:40,200 --> 00:03:43,530
in the object and then I'll go with use them.

51
00:03:44,340 --> 00:03:48,330
Now you can come up with the name and all that, but in our case, we're not going to use that.

52
00:03:48,330 --> 00:03:51,320
We'll just go with use temp files.

53
00:03:51,360 --> 00:03:53,160
We'll set it equal to true.

54
00:03:53,520 --> 00:03:59,520
And then you'll notice something interesting where once you go back to uploads controller again, I'll

55
00:03:59,520 --> 00:04:02,190
collapse this one just so it's not in a way.

56
00:04:02,430 --> 00:04:04,260
And for the time being, I'll just come on.

57
00:04:04,270 --> 00:04:06,750
This one out will return to this one in a second.

58
00:04:07,240 --> 00:04:09,510
If you want to do is go to log.

59
00:04:10,050 --> 00:04:15,540
And then here remember the name was following rec dot files.

60
00:04:16,390 --> 00:04:22,540
And then the name was Emerging Markets, and then let's just cancel this one, so Rick, that files

61
00:04:22,870 --> 00:04:24,470
and we're looking for damage.

62
00:04:24,520 --> 00:04:26,140
Let me save this one.

63
00:04:26,520 --> 00:04:31,200
Then I'm going to swing back to my postman and I have upload image.

64
00:04:31,210 --> 00:04:33,220
Now, you can send the image.

65
00:04:33,430 --> 00:04:35,140
I mean, yeah, you do need some image.

66
00:04:35,170 --> 00:04:35,710
My apologies.

67
00:04:35,980 --> 00:04:37,930
I was about to say you don't need to send the image now.

68
00:04:37,930 --> 00:04:41,490
If you want to see the tampon, you do need to send the image.

69
00:04:41,710 --> 00:04:42,940
Let's send it here.

70
00:04:43,400 --> 00:04:44,600
Let me make this one bigger.

71
00:04:44,770 --> 00:04:47,090
Now, we're not sending response, so don't freak out.

72
00:04:47,110 --> 00:04:50,460
Yes, the user is going to be hanging at this point.

73
00:04:50,800 --> 00:04:55,180
What I want to show you here is the object that we're getting back.

74
00:04:55,570 --> 00:04:59,370
So I have rerack that for hours and then I have the image.

75
00:04:59,380 --> 00:05:00,790
So that's my image object.

76
00:05:00,820 --> 00:05:04,050
Yes, I have data buffer, yada, yada, yada.

77
00:05:04,480 --> 00:05:08,590
What I want to show you is this temp file path.

78
00:05:08,720 --> 00:05:10,450
That's the one that we're looking for.

79
00:05:10,480 --> 00:05:10,910
Why?

80
00:05:11,170 --> 00:05:11,390
Why?

81
00:05:11,500 --> 00:05:15,080
Because it showcases where the image is stored.

82
00:05:15,460 --> 00:05:22,950
So now if you take a look at your project, right in my case, underneath the but somewhere in the road,

83
00:05:22,990 --> 00:05:24,260
you'll find this temp one.

84
00:05:24,610 --> 00:05:27,160
So now this is going to be that image.

85
00:05:27,730 --> 00:05:30,810
So that's the image that I'm sending right now.

86
00:05:31,300 --> 00:05:37,270
And what's really cool now stored on our server right away by default as a temp one.

87
00:05:37,570 --> 00:05:43,390
So now what do we want to do is go back to our upload product image and we're just looking for this

88
00:05:43,390 --> 00:05:43,870
property.

89
00:05:44,290 --> 00:05:47,010
So this was just a showcase where it is located.

90
00:05:47,410 --> 00:05:50,020
So we just create that temp directory.

91
00:05:50,200 --> 00:05:51,550
We upload that file.

92
00:05:51,850 --> 00:05:58,960
So now, instead of doing this whole dance where we basically did it ourselves, now we just use the

93
00:05:58,960 --> 00:06:01,510
express file upload package to do that for us.

94
00:06:01,900 --> 00:06:05,560
So we go back with a white cloud nory, blah, blah, blah, upload.

95
00:06:05,890 --> 00:06:12,160
And then remember, since we are still using the file, upload one, we have access to that files image

96
00:06:12,340 --> 00:06:13,160
and then path.

97
00:06:13,210 --> 00:06:15,520
And that's the first thing that we want to pass in.

98
00:06:15,880 --> 00:06:24,160
So we're going to go over here with Iraq that files that image and then type file path because that's

99
00:06:24,160 --> 00:06:25,300
the name that they provide.

100
00:06:25,720 --> 00:06:27,670
And second, we can pass them some options.

101
00:06:27,950 --> 00:06:29,290
So I'm just going to go over here.

102
00:06:29,800 --> 00:06:35,900
And first one I'm going to do I'm going to say use the file name and I'm going to set it equal to true.

103
00:06:36,140 --> 00:06:38,410
Now, why am I seeing this as a fine line?

104
00:06:38,410 --> 00:06:40,940
Because I want to use whatever it's coming in.

105
00:06:40,960 --> 00:06:42,560
So let me showcase that in a second.

106
00:06:42,880 --> 00:06:46,240
So I'm going to go here with an object or I'm sorry, I already have the object.

107
00:06:46,540 --> 00:06:53,440
I go with use file name and I'll set it equal to true so that No one and the second I want to store

108
00:06:53,440 --> 00:06:54,370
it in a folder.

109
00:06:54,400 --> 00:06:59,590
Now, you don't have to you're going to just store it somewhere in the cloud.

110
00:06:59,830 --> 00:07:04,100
But in my case, I want to set up a specific folder and store it over there.

111
00:07:04,870 --> 00:07:11,860
So in order to have the folder, just look for this icon here and I'm going to call this file hyphen

112
00:07:12,460 --> 00:07:14,920
upload will save it.

113
00:07:15,760 --> 00:07:19,060
And once I have the file, upload should be empty.

114
00:07:19,570 --> 00:07:25,270
There's nothing there, I just created a folder brought in here in the object I'm going to say folder.

115
00:07:25,690 --> 00:07:30,190
And as far as the name, I'm going to go file and upload.

116
00:07:30,440 --> 00:07:35,410
Now I want to console log my result and then we'll send back the response.

117
00:07:35,740 --> 00:07:41,770
So first, I just want to showcase how it's going to work and then we'll send back the proper URL through

118
00:07:41,770 --> 00:07:42,080
the years.

119
00:07:42,370 --> 00:07:45,980
So let's just go back here with console log result analysis.

120
00:07:46,300 --> 00:07:54,220
Yes, you can find all this data in the library, but I just think that it's important that we console

121
00:07:54,220 --> 00:07:54,910
lock together.

122
00:07:55,160 --> 00:07:56,320
So let me go back.

123
00:07:57,460 --> 00:08:03,130
Through the post-mortem, sending computer one and all that, again, the users still pending, that's

124
00:08:03,130 --> 00:08:03,550
fine.

125
00:08:03,910 --> 00:08:11,560
Would you want to do is go back to the cloud generated the file upload, then refresh and voila, we

126
00:08:11,560 --> 00:08:12,250
have the file.

127
00:08:12,520 --> 00:08:20,830
Now we actually have our image stored in the cloud nine, which is really, really, really cool.

128
00:08:21,220 --> 00:08:28,840
And if we take a look at what we're logging noticed, we have all this data coming back from the cloud

129
00:08:28,840 --> 00:08:31,480
nory with the height and all that.

130
00:08:31,480 --> 00:08:36,340
And I said, yes, you can crop those images before you send them out.

131
00:08:36,340 --> 00:08:39,520
And there's tons and tons of other things you can do.

132
00:08:39,530 --> 00:08:42,600
But in our case, we're just looking at the basic setup.

133
00:08:42,909 --> 00:08:45,260
So we send this to the cloud.

134
00:08:45,970 --> 00:08:48,970
And what we're interested is this one sec.

135
00:08:48,970 --> 00:08:55,740
You are you are all so that's where the image is actually accessible on the cloud nine.

136
00:08:56,320 --> 00:08:59,140
So that's why we'll send this back to the user.

137
00:08:59,290 --> 00:09:07,810
So instead of the previous setup where we just sent back for its uploads and then the name in this case,

138
00:09:07,810 --> 00:09:12,700
what we're doing, we're actually sending back the URL that points to the cloud.

139
00:09:13,120 --> 00:09:15,490
So what we want to do here go with return.

140
00:09:16,370 --> 00:09:26,080
Then we want to set up resident status and let's passing the status codes will say, OK, some and then

141
00:09:26,090 --> 00:09:27,500
Dot and Jason.

142
00:09:27,930 --> 00:09:34,730
And in this case, again, I want to go with that image and then source because my front end is looking

143
00:09:34,730 --> 00:09:35,180
for that.

144
00:09:35,570 --> 00:09:40,820
You don't have to just keep in mind that the front end is not going to work because that's what the

145
00:09:40,820 --> 00:09:41,870
front end is looking for.

146
00:09:42,080 --> 00:09:49,010
So in here, I'm going to go with image than source and now I want to go with result underscore or I'm

147
00:09:49,010 --> 00:09:52,130
sorry, Dot, and then ask you, are you Earl?

148
00:09:53,040 --> 00:09:59,370
Let's save this one and now if we go back to the postman and if I go with different file, I'm going

149
00:09:59,370 --> 00:10:00,430
to go with computer.

150
00:10:00,450 --> 00:10:02,760
Number two, I share it.

151
00:10:02,790 --> 00:10:03,480
Awesome.

152
00:10:03,810 --> 00:10:07,980
I send it off and eventually I get back to Chicago.

153
00:10:08,250 --> 00:10:12,750
So hopefully now it is clear that this one definitely just points to the cloud.

154
00:10:13,620 --> 00:10:19,650
So this is not the case where we are just looking for uploads and then you need to add the server you

155
00:10:19,650 --> 00:10:22,710
are all in because that would be localhost three thousand.

156
00:10:23,040 --> 00:10:28,200
But when its production, of course, is going to be a different one in this case, it goes directly

157
00:10:28,500 --> 00:10:29,650
to the cloud.

158
00:10:30,360 --> 00:10:34,230
So would you send it off and we get back this URL?

159
00:10:34,230 --> 00:10:35,490
So let me just take this.

160
00:10:35,490 --> 00:10:36,110
You are wrong.

161
00:10:36,720 --> 00:10:39,810
And if you open this one up in the browser.

162
00:10:40,660 --> 00:10:44,450
There you go, you have the image, essentially the same deal.

163
00:10:44,740 --> 00:10:47,420
We're just not storing that on our server.

164
00:10:47,770 --> 00:10:49,740
We're now starting this in a cloud area.

165
00:10:50,050 --> 00:10:57,460
And as a side note, not only you can do all kinds of transformations when you're setting it off, you

166
00:10:57,460 --> 00:11:03,070
can actually change the URL when you're requesting and Cloud9, again, is going to do those transformations,

167
00:11:03,220 --> 00:11:04,780
just something to keep in mind.

168
00:11:05,260 --> 00:11:09,340
And with this in place, we are ready to move on to the next topic.