Hey there, everyone.
They share.
And welcome to another video.
In this video, we're going to handle how to handle the post forms as well as the images as well.
We won't be sending the images to cloud yet.
That will come up into a separate video itself.
Rather, in this one, we just want to see that how to handle files as well as just the post form.
And again, we have seen all the nitty gritty details.
And as as I said, the post form is much, much reliable as compared to how data comes and it always
comes in request or body.
So you don't need to worry about that.
But some things we need to worry about is this input field has some of the properties like name or not.
That of course comes into the picture here as well.
So we need to say, hey, this one is bringing in first name.
Remember, I'm into the post farm eggs, the white tile is there just to highlight that part.
And similarly, we are going to say that in this one input field, we are going to have a name here
as well, which is last name.
So that's all pretty much it now where this phone will go, of course, we need to provide a method
as well.
This method in this case is post and what action you are taking in.
So we need to verify where the action needs to go.
And so far as you can see, we have these forms for rendering.
So these are the basic ones.
We have the form for my get, but we don't have anything like my post.
So obviously it's time to just go ahead and grab one.
So let's go ahead and say, Hey, this time this will be my post.
So let's go ahead and change that part.
My post again, nothing much of a difference that is we are making we are just sending request or body
and we want to see that how it behaves into the postman as well as into this templating engine as well.
So again, let's go ahead and say slash my post.
Okay.
So we are just dumping down all the information that we probably need.
So let's go ahead and see into the this form.
And let me just quickly check where this form is rendering my post form.
Yep, that's it.
Let's go ahead and save this one.
And this time we want to go to the my post form.
So we're going to go ahead and save my post form.
This is the post form.
Let's go ahead and send Jim.
Jim rocks again.
This is password again.
It shouldn't be password like that.
I really want to change that.
I want to show you that all information is there.
So I'm going to go back up here.
Yes, I know this is too much, but I'll still change this one.
There should be text.
Save that everything.
We don't want to hide any information right now.
You can just change that into the password format and that's it.
But still, I want to make everything visible as of now.
So let's go ahead and say Jim can be better.
Jim Rocks.
There we go.
And if I go ahead and hit the submit, it says, hey, cannot post slash my post.
So what is going on wrong in this case?
Why it is not able to handle slash my post that is obviously probably I have done something wrong up
here.
So it says, hey, this is my post and it says, hey, this is a get type, so it should be a post type.
Again, these are common errors.
You will also be getting them.
That's why I'm not skipping them up.
You need to see that.
How to trace these as well.
As well as how to handle them.
Let's go back up here.
Hit a reload one more time and give it a try one more time.
Jim Rocks, let's go ahead and hit submit.
And we are seeing that the first name and the last name is coming in.
Okay, but we are not yet satisfied because that's how happened in the last one also.
So this is all good, but can I do the same thing into the post request into this form as well?
Let's go ahead and change the post and we're going to go ahead and say, hey, now, if I directly receive
the my post, will I be able to send this one directly up here?
Let's go ahead and hit the send and notice we are again getting the name.
So whatever we are sending, we are receiving it back.
That is absolutely nice.
And that's why I say post forms are much more reliable.
Yes.
Get are also reliable in majority of the case you'll be anyways using React or Angular or something
like that.
Okay.
A little bit more.
Now we want to handle files as well, so we haven't worked through with the file so far.
So let's go ahead and get a copy of this one.
So I'm going to go ahead and just make a copy of this one.
Now, this time this is a type of file and the name should be definitely different.
So we're going to go ahead and call this one as sample file.
Seems like a good name to me.
And again, we need to change this for as well.
It is a good thing you don't need to properly change this one.
It is not required in case you are going for the accessibility.
Absolutely 100% do it.
But in this case, you are just testing out the stuff.
Okay, let's go ahead and go to index.
Save this so that it reloads everything for me and I'm going to go back onto this form, hit a reload
and there we go.
Now I can choose a media file as well, but can I just go ahead and work on with the media file as it
is?
Probably not because you have already seen that.
Why?
I cannot go ahead and do this.
Just go back up here into the index.
We haven't set a middleware for handling the files, so let's go ahead and do this.
Let's go ahead and first check the package JSON, yes, express file upload is installed.
So that is a good thing.
Let's go ahead and bring this up.
So I'm going to go ahead and say const file upload that is going to come form require there should be
super easy for you.
Now I guess we have done this so many times and we're going to go ahead and use this one here as well.
So app dot use and we are going to say file upload and that's it.
So now this is all good.
Now we should be able to see the file upload as well.
Let's go ahead and dump it down into some of the method, which is the post method.
I don't want to send it back into the body because there is a different syntax of sending the files
back.
I'm going to go ahead and simply do the console log.
So I'm going to go ahead and say that, hey, if you are receiving any kind of post data in the format
of the files, just go ahead and console.log that.
So I'm going to go ahead and say console log, request dot files because that's where all the files
come in.
I just want to see the information of it.
So seems like okay, as of now, let's go ahead and move on to this guy up here.
Hit a quick reload just for the satisfaction.
Let's go ahead and send the name as well.
So again, we are going to go ahead and send hit the AE and let's choose a file as well.
I'm going to go ahead and choose a file of again, my classic go image, which happens to be on my desktop.
I'm going to go ahead and submit this one.
It says, hey, this is all going in.
Also, I'm taking this sample file which is Gopi and G Ock coming back up here.
Notice here I'm seeing an undefined here.
So why this is happening that why this image is not going in like this.
I told you that this is not how image goes in when the image actually is.
Select that in any of the post format or anything you need to again go back onto the slide to understand
this part that if you want to send the files like this, let me go back up here and show you again that
of handling the form.
We need to read this particular thing that if you want to read the file, you have to read it like this
way.
But again, this is a little bit of more work onto the front end side.
Can we make it a little bit something like this that hey, I even of our frontend guys don't write any
of this code which is truly he should be writing because this is how he should give me a data URL.
But in case he doesn't want to do it, or probably you want to do everything from the back end itself,
you can.
Actually do a little bit more into the file upload again some of the other libraries may support it
may not this guy file upload actually is just like a charm it does support that.
So how you can go ahead and work on with that.
Let me show you that this file upload, you can come here and again this is just an option which is
there in the file upload.
I have to dig up into the documentation itself so I can go ahead and pass on some of the options.
And there are a couple of options which is first is use temporary file.
I need to turn this flag on so I go ahead and say, hey, use this this true, and then you can actually
create a temporary directory.
So I'm going to go ahead and say, hey, this is my temporary directory.
I'm going to go ahead and call this one as slash, temp, slash.
That's it.
That's all I have to do now.
Again, will this always work?
Probably not.
Probably.
You might have to go back onto this one, add this much of bit of the code.
Again, this is the front end part.
That's why I'm not taking it too much into the depth here.
But once you have done this part, this actually does really some magic stuff.
Let me show you that.
I'll come back onto this localhost.
Go back and hit a reload.