Hey did everyone this year and welcome to another new section.
Now, this section is one of the most important section, of course, just like the last previous section.
Now, in this section, I will talk about how to handle forms and images.
And some of you might be saying, hey, I know how to handle forms and images.
I have done that in the React course or Angular course or somewhere.
Other courses.
No, my friend, you actually don't really know how to handle the forms now.
Well, the reason why a lot of people who have just gone through with some of the libraries like React
or Angular or V or something like in the front end, like just react Native Basics.
They really don't understand the forms in depth.
And this is not their fault.
This is the fault or kind of an extraordinary power of the back end developers.
They have done their job so well that you really don't understand at the front end side that how these
form works forms we know that they are basic get request and the post request, but in this section
you are going to truly understand that how actually form works.
Another important aspect is images.
Now a lot of time people struggle that how I'm going to send the images, how I'm going to get the path
back or the URL back, how it actually works.
Sometimes it works out of the box, sometimes it doesn't.
And all of that.
I'll give you a reason right in this video so that once and for all, it gets all clear to you.
So the the fear of uploading the images, videos, PDF or anything is definitely going to go away from
that part.
So let's go ahead and understand and talk a little bit.
I'll give you a few examples as well as well as some of the things which we have already designed,
but I haven't shown, you know, it's not something that I personally designed.
We have designed this together in the course itself, but I didn't give much focus because it was not
important at that point.
Now it is important, so let's talk about it.
So how we're going to handle forms and images now we're going to talk about them one by one.
First, we are going to understand that how the get type of forms are being worked and there is not
too many of varieties in the form itself.
There are just get types of forms and the post type of forms here.
Now in case you don't know about this, get type of form is usually being searched whenever you type
anything in the Google search.
That is a get type of form.
Whenever you are searching on any website, that is usually a get type of data.
No of the sensitive information is being thrown away the get type of the form because it actually travels
right in the clear text view and nobody wants you to see pass on your password in the clear text format.
Another is the post form in which data is being sent not in the clear text, but it is actually kind
of hidden and is being passed on and can be read by the server itself.
That's the only idea.
Another type of thing is upload a file or files.
There can be one file that you want to upload and there can be multiple files that you want to upload.
Now, in this case, it includes all the images, it includes PDFs, maybe videos as well.
How you process that video where you save those videos, that's up to you.
But I'm going to show you what's the secret behind it.
And after watching this section, definitely you won't be going like a full mode.
And what is the problem?
Why am I file is not uploading and a whole bunch of other things.
So we're going to talk about that.
So I will definitely come back and we will create separate section as well as separate code files for
all of this, what we are going to do.
But right now I want to talk about something really, really important regarding the images.
So let me open up my AE back end and here is the AE back end.
So this is what we have created so far.
I hope you have the code files.
If not, just let me know in the comments section, not on the public comment section.
In the AE itself, the team will guide you from where you can actually grab all of these x exercise
files.
So let's drag and drop this AE docs in case you remember.
I hope you haven't skipped that section.
So let's go ahead and run this one and I want to show you something really, really interesting.
Let's close all of this.
How to run this?
I have no idea.
So always I come back and look into packager Jason and that's where the start script is there.
So I'm going to go ahead and say NPM, run and start, or I can just go ahead and say NPM start.
That is also totally acceptable.
Whenever you receive a new project, always go like this.
Always look in the package rotation.
Don't just blindly start NPM, run NPM, Dave and everything.
No, we don't do that.
We always go into the scripts and look for how to properly run that, what our package is and all of
that.
So here to jog your memory a little bit, we have used express file upload and to jog it a little bit
further down the road, I'm going to go ahead and say, hey, I want to go into the local host and here
if I go into API docs, I'm able to see this entirety of the things by default.
The root is computed for me.
That is nice and we worked on the course upload.
So here if I go ahead and say that, hey, I want to try it out, I want to choose an image, I simply
go ahead, choose an image.
And the let's just say I use this one, which is a recent YouTube video that I worked on, and I'm going
to go ahead and say that this is a multipart form data, which we have already done, and I'm going
to go ahead and execute.
Now, this successfully actually uploads my photo and I can go ahead, go back up here and in the images
I can see somewhere there should be.
So this is the image.
That we recently uploaded.
So this is nice.
But the problem here is it is a big, big problem.
This is the point where exactly people think that, okay, if I have worked on the file upload, I have
used express file upload, I'll be able to upload the images.
No, my friend, this is not that easy.
You might be using multiple, you might be using file upload.
Doesn't really matter.
You might be using Formidable.
And I can name probably five different libraries further down the road.
But until unless you understand the core basics that what is the problem that happens when uploading
the file.
You will never, ever be able to recognize this and these kinds of kind of abstraction layer that programmers
have put in that helps you to not focus much on there.
Let me explain what it means and what happens there.
Now, whenever you upload an image, there is a lot that happens in the image and you should really
read this API reference of a file reader.
Now you cannot just give me a file name and I can magically upload that your computer doesn't know where
that file is either.
I need a complete path which I can access from the backend to upload that image, or I need a blob or
a file that I can upload.
So what's the difference between the file and variable?
A whole lot of differences there.
For example, a lot of time when the backend is not properly configured or I can say rather the strategy
is not to have this blob, but rather to give you just the just the file itself that hey, give me the
file reference itself and I upload that it is expected that you should not give the file name.
You should give me a data URL.
What is that?
Let me show you.
Whenever you read a file, you should read the file as read as data URL.
This is classic one on one JavaScript up here.
Now in this there are some examples as well that if you are uploading a file itself and you want to
change the preview of the file itself, you should not directly just read the file and get the file
name itself.
If you want to preview the file, which also can be transferred to the back end itself.
This much of the code that you should be writing up here, for example, you should first get the preview.
This is the basic classic stuff and document query selected and everything.
This is where the important step comes in.
So what happens whenever you actually read the file?
It actually comes up into this.
Let me scroll a little bit.
It has a couple of modes up here as well.
Looks like.
Let me go into the file reader.
Yeah, this is the one.
And constructor.
There we go.
So going a little bit onto the file reader and a file reader.
Whenever you try to read the file, it has three modes the empty mode, the loading mode and the done
mode.
So as soon as the done part is done, then only you'll be able to either send the file on to the back
end or to able to have a preview of it.
Now if I scroll a little bit, you can see there are a lot of methods up here and there is a specific
example being given to here.
So let me go back up here and give this example.
So.
There we go.
So this is the code that you have to read.
Notice here it says reader, dot ad event listener.
And as soon as the load event is complete or you can check for the numbers as well, then you can actually
go ahead and have this one.
So you might be saying, hey, what is all this and why should I read this data URL?
What's the difference between a URL and a data URL?
Let me first give you an example up here, which is again, abstraction, but I'll show you more details.
If I go ahead and select any of this image, I go ahead and open this up and this image is being previewed
because now it is not reading the file, just the name.
It is actually getting the file here.
What does that mean?
Let me explain it more.
So notice here in this URL we are actually getting, this server is running and we are displaying all
the headers itself.
Let's get a little bit more information.
So in the part where we worked on the course upload around line number 66, let's go ahead and see that
when these files actually comes up as in the file format, what all the information that it is bringing
in.
So let's go ahead and say, hey, I want to go ahead and log some more information and I want to see
that what kind of file you are bringing in so that we get more information about it.
Now notice here we have used the file upload and this is bringing in the file.
And now I want to check what all the information you are bringing in.
So I go ahead, save this one.
The server is up and running.
We can even go into full screen mode.
Let's go ahead and try this one more time.
So I'm going to say, hey, reset this form and let's go ahead and kind of cancel this one.
Let's try it out.
Choose a file and I'm going to go again with the classic of Go Image.
Again, it can be anything and let's execute this one again.
This went successfully.
We obviously know this, but this is further down the information that it is bringing another entire
object, not just the file name that you were thinking.
And notice here, apart from the name, it is also getting the entire data, which is a buffer.
Now this entire data buffer itself is an image in the binary format, of course, but this is your image.
This actually goes in.
But even if you try to just send this data itself, this is since not this is not the image because
image is other properties like the mime type and the MD5 and whole bunch of other things.
It will not go onto the server and that is where the problem comes in.
Sometimes back end are designed in such a way that you will pass on me entirety of this information
or you will give me a data URL.
So in case the back end is expecting that, hey, I will give you a data URL.
In this case you have to write this much of the code and read the file as a file reader itself and then
pass on this information to the back end.
And yes, I have seen so many of the incidents where these things happen and it is expected from you
as a frontend developer, whether React, Angular or anything else, that you will read it as a file
reader and give me their now it's up to you.
You can ask the backend developer that, Hey, I don't want to read it like this, I will just give
you the file itself and you just handle it automatically.
Yes, that is possible.
We will even design that kind of a thing here.
But again, I hope this gives you more information that is there.
Now, I would like to bring your attention a little bit towards this temp file path.
We are going to use this and this is the main culprit why a lot of features are not being properly designed
in the back end.
So I guess a lot of things that I've explained and try to give you a scenario again, I know this is
a theory video, but this is a really, really super important video to understand further what entirely
we'll be doing in this entire section.
So go ahead, watch it one more time.
But again, understand every point that I'm trying to make in front of you.
Understand the different scenarios that I'm trying to portray here.
Without this, you will face problems.
So go ahead, read this properly or watch this video again.
It is really super important for you.
Let's go ahead and catch up in the next video.