Are everyone.
In this video we will talk about the unlock features.
Okay.
We'll be uploading media like image or video.
In this video, let me show you what exactly that happen on the front end application okay I will use
the raw for use.
What about play?
We will mark the API to upload.
Okay we will back to the server to upload and the server it will take the help of the Cloudinary with
the Cloudinary.
It will respond back the.
Now you are heading back to the reservoir.
Okay, after we already have a, um, what we need to do.
Well, we need to create one more invoice for, ah, the URL right here into the media URL.
What do you mean?
Right now is after we already apply and we got the, um, we will mark another code into the server.
So avatars, for example, like that pass the, uh, media into the boss.
Okay.
We will update us into the boss box right here with the wristband from previous and we will update us.
So please don't zero idea what we will do.
So in this video, let me show you how we can set up the Cloudinary into our project.
And you know my setup setup is a little bit complicated okay.
And I hate to, uh, run some configuration, okay?
Never in my life, um, try to remember some configuration is better.
I will show you how we can show the Sean Bobbitt mean to say, okay, how it can be set up and we will
follow in that tutorial.
That's the strategy right now.
Firstly I will show about Next.js.
Cloudinary.
And if you say this is the topic from the official documentation of the cloud Reebok.com, right after
we click here, you will see we have a subject like this.
It's either angular, but I don't care that I only care Next.js.
So let's say first we already create a new project right here, right?
We are following.
We need to install the commentary.
Let's install that with my.
Now let's say.
Right here we need to create a node, another module for Cloudinary.
Right.
For sure we'll create a module and we only need the module and service right.
And we also need to create a provider for configuration something like that.
We can uh we will need to create the provider.
You just need to invoke this thing directly inside the module.
But right now I think I will focus into the documentation to show you okay.
Firstly like I will go buy this thing.
And you gently took up my.
Okay, don't try to remember us.
We will use an array module.
After that we will use the render service.
And on Maxwell we will generate the module first.
And after that we will generate the service or controller if you want right here we don't list the controller
okay.
Let me accelerate the provider also.
So after that one we are already have a crowded array.
Right here Let's remove this file.
And only that.
Inside the cloudinary provider.
Uh, let me also.
Um.
Ah.
Uh, I think right here is with this tag, it already create a new folder.
Hmm.
Let's remove those also.
Okay.
Actually, to create cloud.
Dot provider.
Dot this.
That will be very enough.
And let me copy Be everything from this cloud reconfiguration.
Buddhas over here.
Okay.
Right now we need to boost a little bit up.
Now Cloudera name?
Let me create.
I will go with cloud rename model over here.
We are case.
Buddha.
Over here.
And uh, secret key boost dot over here.
And Max over here.
You just need to login into the cloud.
Come over here and click into the home and click into the last bar and you will see the option to go
to the API keys over here.
Or you can just need to click into the setting and curl is an evacuation.
It will be totally the same right?
And we need to put the name.
Okay.
This is the name.
Or here will be the name of the cloud entry.
I will dictate and put that over here.
And with the API key I will also put that over here and API secret.
I will copy also.
From here I will.
Set up the the code.
Let me bounce the video and tabletop.
And let me close inside the approach.
After all, let me, uh, put my makeup on base and put my cigarettes over here so that around the environment
variable and let forgot into the documentation also.
We already lost the configuration.
And we need to create some data for respond.
Right.
Um, right here, right here.
Archila will create directly inside Cloudinary.
Right here.
Okay.
Or you can separate it into the global type.
But I think this is not available.
This only you inside this folder.
Right.
Over here we will customize respond.
And finally we will set up the service.
Let me copy everything over here inside the service.
Put that over here.
Also it
And we have a lot of error right now because we haven't installed yet.
Let me read a little bit.
But like we need to install the stream.
And let's see what here.
We need to create a new also.
Raffle.
Let me install the stream file package.
And after that we will install the filter bucket.
And.
The pass grid also.
Let me install first.
And let's copy this line.
Move it over here.
Okay.
Right here.
Let me chain a little bit this part.
Right here.
We have a lot of bias issue.
We need to fix a little bit.
First place we made a reject a beta.
Environmental rejection reason to make an error.
It means right here we will return an error.
Okay.
From error log message.
And with here.
How do you respond?
Right here.
I will pass this thing into Cloudinary.
Respond.
Okay.
And with this, I, um, we need to override the, uh, link.
So click on show documentation.
They make up.
Why this rule?
Is r s let let me override.
R?
Over.
This will fix the issue.
And let me explain for you what actually happened.
Right now in the blog file is already created.
Promise.
Okay.
Well, you may ask me.
Okay, we go over here.
It just needs somehow to create a server block.
Okay.
And you may ask me what in the stream a file.
Okay, Absolutely.
This lab got right here.
It will.
Convert the buffer into the readable stream and send the data into the upstream of the cloud array.
Well, the reason is very simple, because the cloud read the notes directly from a buffer.
Okay.
How do you read?
Cannot understand buffer.
So for that reason we just need to create the stream.
Okay.
And we will connect it with the stream right here.
Okay.
This is the concept of Node.js.
Okay.
Maybe you can check out my Not yet.
Of course it does, because I already explained for you very detail about what exactly about Red Stream
or Rye Stream.
Okay.
What exactly is stream?
It is not.
But right now you just need to remember the stream right here cannot understand the buffer.
For that reason, we need to use this library to convert the buffer into the readable stream.
And with the pi method right here, it will send this readable stream into the cloud area.
Okay.
Over here like this.
And with this duck right here it just need to somehow a block.
Okay.
It will care about a block file.
Okay.
Richard, a row of the cloudy Ray.
You actually don't need to care too much about them.
So after we already installed right here, we need to import module.
Let me copy everything.
Inside module over here.
Right.
Both.
What?
We.
Wrote over here.
Cloud provider.
And serve it right.
This is a cloud provider.
And you can say, we can call this line right here and put that roughly inside the provider.
So that is not how we can configure.
And we need to create the controller for both from the oplog file.
Right.
So right here we can create the controller.
Um.
Let me read a bit.
We can create controllers.
Plus five.
Okay, so we already installed the new package.
Now let me create.
The controller.
Okay, I think I can create.
The controller for Cloudinary also.
Well, let's do generate new one.
Something like that.
Why?
Are.
We.
You have a cloud controller, right?
So you wake up everyday and use over here.
Involved and evolve some stuff.
And we need to inject cloudinary.
And let me show you how we can upload that.
I will create a new folder.
I'll.
Also.
Have you add a request?
Name.
Okay.
So cloud is right.
And blog.
Is, uh.
Uh.
The body show the form data.
Okay.
And this query right here, we will boost exactly the K up the screen over here will be five.
And five.
And some thing.
Added to the image.
Okay.
And I will go over and I will put in loop.
Say we got an internal server error.
Let's see what exactly does.
Uh.
Cannot read property.
Uploaded file.
Create stream.
Um.
Let me go back to the service right here between this line right here.
Not work.
Okay.
Let me try to literally inbox.
And send again.
Okay.
We are ready.
To fly.
If you save this page it will now we already successfully.
And you will see we got the new You are over here, right?
This is the UI from Cloudinary.
Let me copy this URL.
And this is the URL.
And this learning will be better.
This is the best, right.
And.
Let me.
Now you will say we already uploaded successfully.
So very very good right.
So I hope you understand this video.
And I will see you in the next one.