Hated everyone that they share.
And yes, I did created a presentation, a slide for this particular post.
They didn't used it, so I thought, let's use it, this one.
So in this video we're going to see and discuss a little bit more about the files and the images and
how to send it onto the cloud network.
Now, sending to the cloud is not a difficult thing.
It's super easy how to send it.
That might be.
But sending to the cloud only once you have access of the file is super, super easy.
It says, hey, if you'll go on to the cloud API.
And by the way, yes, I did search on the Google Cloud API.
You can see the API reference.
There are so many apps that you can work on with the metadata admin API and a whole bunch of even video
players and all that.
So you can even play the videos and stuff.
Yes, you have to spend a little bit time on understanding it, probably the pricing as well and then
you can go for it.
But the whole part is that cloud native gives you all of this and you can select the Node.js part and
it says, Hey, use the cloud native to upload, upload.
So a lot of methods here, but we can shrink it.
Then you can just pass on the file options and you can even have a callback.
Now we can also set some of the presets and options and all of that.
If you'll dig up a little bit more into the options, you can send in which folder you want to put all
of these files so I can go ahead and go into my cloud dashboard.
I'm pretty sure you might have created an account as well.
Go into the media library, you'll see this as empty.
This is also seems to be a new one.
I'll add a folder.
I'm going to call this one as simply users.
Let's go ahead and save this one.
This is where I'm going to keep all the users.
So whenever I'm sending the file, I'll pass on an option that, hey, upload this one into user.
It's no big deal, just an option and just say folder name.
That's it.
Okay, bigger question is that this is what all we need.
So we have already installed the cloud and we want to use this syntax.
So how this is going to work, it's really, really simple.
Let me show you that.
I will come back onto the index, say that package dot JSON cloud that is already installed.
That's awesome.
So let's go back up here into this one and I will say that I want to use a cloud native.
You can go ahead and let's go ahead and use a const or whatever you like.
So I'm going to go ahead and say Cloud Neri Hey, I'll go ahead and say I need you.
So I'll say just the required and the cloud.
Ready.
Now what you're going to notice that they have actually recently migrated into the version two of their
API.
So they will ask you that hey, always use this dot V to here and then after you can use this upload
or upload or upload or dot assigned, upload, unsigned, upload, whatever you want to use.
So what we can do is we can actually run this method right up here that V to now whenever you are going
to have this cloud entry, it actually means, hey, the cloud v two.
So automatically that comes in.
So I love that part.
Okay, I'm going to go ahead and save this one.
Now comes up to the part where we actually go ahead and use this post.
Now we saw that we are receiving this file into request files.
So I know that I have this file and I know the name of this file as well.
So instead of sending this entirety of the data now, I'm going to go ahead and send the data as details.
So I'm going to go ahead and create an object.
Let's call this one as details.
In this, I'll just say first, first name.
So as soon as this first name comes up, that will be collected by request, dot, body, body, dot,
first name.
So that's how this will be collected.
I also know that there is a last name coming in, last name, and that will be collected by request,
body dot, last name.
Now if you want to send any other detail that we'll worry about later on, but this is what I want to
send as a response.
So this is better.
Now, coming up onto this part where we are having this request file.
So let's go ahead and keep that request.
Console.log is really important in this case.
If you really want to understand this, I'm let's just keep the request body as well.
But I'm not much interested in that part.
I'm going to go ahead and say I want to have a file that I want to send to Cloud Native, how I'm going
to request, how I'm going to access this file.
So I'm going to say request files, then whatever the file name you call it in the front end.
So in this case, we call it a sample file in case you forgot that postman or the post form, remember
this is called as name as sample file.
This is exactly what I'm naming up here.
Sample file.
Okay, so that's what you got.
Now what happens is as soon as you upload this file onto cloud net, some result is giving back to you.
That's the exact keyword they use in the documentation and that's why I'm using it.
So it's easier for you to explore the doc, but feel free to call it Superman.
And then what happens is this entirety of the thing is going to be going like this.
So first we access the cloud.
Remember, it will bring up automatically cloud dot v two.
Then it has the function of uploader and inside that we have so many of these things that we can use
like destroy, explode.
There's so much going on.
What we are interested in is this the simple upload.
So I'm going to go ahead and say, Hey, I just want to upload.
Now we just saw in the documentation that it takes a couple of things you can give a file and the options.
Okay, that's nice.
So I have access.
I have got this access of the file.
So that is really, really.
The easy part.
So I'm going to go ahead and say I will give you this file, so you should be all happy.
And now I go back and provide the options.
Now, how do I provide the option?
It's pretty easy.
I'm going to go ahead and say the folder name, which is going to be users.
Okay.
So so far, so good.
All should be happy now.
Okay, let's go ahead and see a whole lot of errors.
And I want to see the console log as well.
So I'm going to go ahead and say, hey, whatever is there in the result.
First you show me up here and then let's also get it back up here as well.
So we're going to go ahead and say, hey, whatever the result is.
So let's go ahead and grab the result as well.
Okay, looks good.
Let's go ahead and try to send some data to cloud three and let's fail.
Let's go back up here.
This is all reloaded.
Coming back onto this part localhost.
Go back up here, hit a reload.
Let's go ahead and use the test all the way in the first name and the last name test with a couple of
extra TS no bothering there and let's go ahead and fail it for the first time.
I'm going to go ahead and take these options.
And in fact, we are not going to fail yet because I missed one thing.
We want to fail.
Definitely.
If I go ahead and show you the important thing that I wanted to show you is to remove all of this.
So go ahead and remove all of this.
That's where we want to fail and that's where we want to learn and that's where we want to see the importance
of this.
So please excuse me.
The flow was a little bit off, but go ahead and remove all the options in the file upload.
Let's pass on the empty parenthesis or even remove that.
Go back up here and hit a reload here as well.
Let's go ahead and try this again.
Test, test again a couple of TS and let's use the file and definitely this time let's fail.
Go select this one and say submit.
Now as soon as I submit, it says, Hey, you must apply the API keys.
So obviously I need to supply the API keys and path and all of that.
Let's go ahead and figure out that one.
Now, in order to use the cloud, very obviously, how the cloud is going to know that you have you
are the owner of this one.
So your API keys acts as a keyword, as a password and the user name for you.
So you need to pass on that.
So we're going to go ahead and say, hey, cloud config again, not magically knowing it.
This is this actually comes up from the cloud itself.
Now how it works, first you have to say the cloud name and usually your cloud name comes up in the
from the process dot e and V come on process dot E and V, dot cloud and name something like this if
I can write that.
There we go.
So this is how it usually comes in.
But since we are not using the DOT and V, we are in the learning phase.
We are not going into production yet.
So this is why I'm going to comment this out.
So I'm going to go ahead and below this.
I'm going to go ahead and provide the cloud name.
Okay.
First, let me just collect all of this.
So cloud name from where I can collect you cloud E and going to the dashboard and looks like they are
providing me all up here.
So that's nice of them.
So there we go.
Yes, they actually gives you so cloud name.
I've come up here and again I'm going to go ahead and wrap them up into the string in the process.
Dot Envy.
You don't need to rub them up in the string.
The two more things.
The first one is API underscore key and this is how you pass it.
Just below that you go ahead and say API secret and there you go, you pass it like that.
So these are the two information that you need to send up.
Again, you go ahead and grab that copy to clipboard.
So nicely implemented there, paste that and we're going to go ahead and copy this to Clipboard as well.
Really big one.
This is my environment variable.
Yep.
Apes secret is about once a copy that under the clipboard almost had made a mistake.
There we go.
And definitely I'm going to go ahead and destroy these keys as soon as this video is done.
So go ahead and do that.
This section is done, by the way, are we ready to fail again?
Yes, probably so.
Let's go back up here.
Okay.
So let's go on to this guy.
Yep.
There we go.
Back, hit, reload and hopefully let's go ahead and see the response.
So test, test with a couple of TS.
Choose the file one more time.
Go lang and open that up here and submit that.
Now notice here this says hey, the path argument must be a file type string received an instance of
an object at new node error.
So what is happening here?
We saw that just up here that we are actually receiving in the console log.
We saw that the file is coming in.
But this is not happy.
You're not you need to send the path off.
Must be a type string.
So obviously we got the problem immediately that the problem is that we are sending him the file.
It is giving us just the file name up here because those temporary objects were not present.
So we need to provide it a little bit more.
So can I send it data dot this name or can I directly send this data actually to just see that if it
works or not, just to have some fun.
So let's go ahead and say that this file is actually the entirety of the object.
So this is what we are calling this as a file.
So sample file, we are storing this object into this entirely.
I hope you understand that much better.
So if I go ahead and say file name, it will access this file, the data will access this and all of
these information.
So just to prove my point, I'm going to go ahead and say, instead of saying this file, let's go ahead
and send the data, because some of you might be believing that that buffer data is actually the data
itself.
So why not just give it a try?
Let's go ahead and save this.
That's working fine.
Come on.
Too much of scrolling.
So go ahead and save this one and go back up here, here to reload one more time to see if this thing
is going nice and easy.
Test test with a couple of ts choosing the classic go like image again up here.
By the way, I do have a go length series, check it out and submit that and notice it says again the
same error that hey, this is not am expecting and this is where the big thing comes in.
You need to provide the data URL and again, what is the data?
You are URL data, you are actually consistent.
All of this information that is in fact a file itself.
And that's why I told you it is difficult.
It is difficult to handle the files and all of that.
Now coming to the rescue is going to be the guy that I talked about.
So remember, once we have this one file uploader, where are you?
There we go at line 18.
This is where we need to provide all these options.
Since my clipboard is all gone, I have to use this one.
So temporary files.
Yes, I want to use this one.
So I'll pass on a flag of true and where this temporary file is going to be stored.
Again, the best part, what I like about this temporary directory.
This directory is created at the time you are uploading the file and once the file is gone or that request
is all gone, it immediately removes that also so beautifully designed like hats off to the developer.
So this is going to be the temp.
And just like that, that's it.
You can actually reuse this exact code whenever you like.
Now once you have this, then you can actually go ahead and say, Hey, I don't want to send you this
file and data and all of that.
This can be changed a little bit.
A little bit.
But first, we need to see what is coming in.
We'll still keep it as file or data.
We'll see another one more error.
And that hopefully will help us to understand a bit more.
Save this one and coming back this time again.
Expecting one more error this time.
So test test with a couple of t choose that and go image upload that.
I will not stop till I upload this co image onto the cloud.
Re Now coming back onto this reading the errors.
Now notice here this time the data is coming in, it is having the same buffer and name, but this time
it is coming with the temp file path.
So I do have now a path which is slash, temp slash the unique ID being given to this.
And this is exactly the file that I need.
The file is now moved from the front end into a temporary zone and I can access that zone via the back
end.
So beautiful.
So I can all have to do is say whatever you are calling your file dot the temp file path.
So I'm going to go ahead and copy this.
So beautifully designed.
I'm super impressed.
Okay.
We can go ahead and remove this one instead of the data.
This time I need to send the temp file path and that's it.
That's all we need that.
Let's go ahead and save this one.
And hopefully, hopefully this time we'll be able to send our go image onto the Cloud Network again,
make sure the folder is there.
Otherwise it sometimes gives you error.
It doesn't automatically create a new folder for you.
So go ahead and verify that coming back and hit the reload and let's try it one more time.
We're going to go ahead and say test, this is test and let's choose a file again, the classic go image
and we're going to go ahead and hit submit and notice it says, hey, the result is empty this time
now.
Yes.
Obviously the result is empty and you will understand the reason for that in a minute.
But to your surprise or not, to your surprise, let's go up into the cloud and see what has happened
into the media library.
I can see that there is new user.
If I go ahead and check it out, let's go ahead and see browse into this.
Okay.
So finally I was able to push my go into the cloud.
Okay, that is fine.
That is nice that we have actually successfully hit that, but we were not able to see any result that
is going on.
This is because it happened so fast that it is not really good thing.
We need to actually wait for a few minutes now.
Notice it returns me a promise and we didn't give any time to actually get this promise back.
In fact, one of the major things that you are going to see in all of the production level code is your
entirety of the function is wrapped around to have some kind of a big promise, because entirety of
the world is of the JavaScript as these days running onto the promise, and sometimes you don't need
that much of the promises.
So how we're going to do that, we are going to wait for this result.
So for that, we're going to use the keyword.
Now, since I'm using the wait keyword, I need to go ahead and move into the async part.
So let's go ahead and do that.
And once you actually do this now, it will wait for this result to come in or you can use the promises
as well.
Cloud and upload and all of that and say, hey dot then dot catch again.
Classic JavaScript.
Nothing no bad up here again both of these methods are same.
If you are using dot then and dot cache are using a single weight, it's kind of a same.
But this time since I've already uploaded the go length time to choose something different.
So let's go ahead, save this one and let's go back up here onto the local host, going back up here,
hitting a reload and choosing a different image.
So again, test a couple of tests like that and let's choose a different image, probably a thumbnail
that I recently created for one of the video like a long time ago, not recently and submit this one
and this time it's waiting there a little bit.
The loading is happening and now we are seeing a ton of data that is coming back to us and this data
is actually nicely formatted on our console.
So we'll be actually doing that part up here.
Let's see first if the image has uploaded or not.
Obviously it has.
So I need to just hit a refresh up here.
And there we go.
Our image is coming in nicely.
So that is part I'm happy.
And I go back up here and I see this is all what we are getting.
So this entirety of this object is the result that is coming up.
So result has so much of the data.
The first thing that I love about is is the public ID.
Now, I have seen some of the places where actually when you upload these files, they actually store
them with the same name itself.
This creates a lot of problems.
Sometimes people just say their name always with one dot PNG or one dot jpeg and having the same name
image means you are going to overwrite.
No good for you.
So you can handle these cases where your own.
Maybe you want to give something a try like nano ID or you id give a unique name to each image and stored
there in case you are using file store or firebase or something.
I love that cloud.
Nobody actually handles that.
So all I need to do is in my database, I can store this public ID and they give you even the path and
the unique name.
So fantastic.
They also gives you a couple of URLs as well.
So if you store the directory URL, you can store that and if you want to, you store the security URL
that is just an HTTP s version of it.
You can go ahead and use that access mode.
We are also allowed to pass in on the action modes or access mode and we can change it from public to
private or something.
And they also gives you the original file name.
Remember the temp that we are using?
So this is what we are having.
It also sends you back an API key, so make sure you are cautious about that.
But again, nobody is giving you the secret.
So this is all fine.
So this is all the basics of it.
And I hope now you understand absolutely in-depth detail about how to handle all of this.
But there is a little bit more.
There is a little bit more.
What about when we have multiple of the files coming in?
We haven't talked about that.
So this is how to upload one file, but told you this is a pro-level course.
So we're going to handle how to handle multiple files as well.
But in the next video, let's catch up there.