Hey there.
Everyone is here.
And in this video we're going to work with the image, upload a lot of people get afraid of as soon
as there is some file being uploaded or image being uploaded and they found all the time it's confusing
that how to handle the images and I get you it's totally fine.
It's totally okay because images are by default, not a part of the express itself.
Express don't know how to handle these kinds of binary data, images, PDF, whatever that's coming
up.
Usually there are some other tools that we have to install to handle that.
One of them is quite famous.
One You might have heard about this from me or from some other instructor, but there is no shortage
of such tools and the reality is that we need to install such kind of a tool up here.
So let's go ahead and analyze this.
We'll go up here back onto the NPM.
And one of the common ones that you are going to see, of course, other than express is actually this
one express file upload.
So this is the one and let's go ahead, give it a second.
And you can see the downloads are getting increased.
This is fairly a new package, not too much new, but it's fairly new compared to others.
It just got published nine months ago, but it's really, really one of the fantastic and easiest one
to handle all of that.
Now, it doesn't come up with too much of a requirement.
The usage is pretty simple.
What are you going to do is as soon as you see something in the post request on any of the route, it
will give you access through request files.
So just like you get requested body, you get request files dot whatever the file is being uploaded.
So in this case the foo is getting uploaded.
So that is what we are going to get.
And again, this foo is responsible for whatever you are naming it at the type of defining in the front
in the forms.
So remember the name user name, name, email.
Yeah, that's exactly one here.
You can also upload a multiple of them.
They give you even the example projects and basic upload all of that.
If you click on this example project, they'll give you the even the source code and remember the name
I was talking about.
This is exactly the name, the sample name, file name.
So this is I was talking about and the submit value is upload and all of that and then simply come up
here and you can go ahead and request this just like this request files dot sample file.
Pretty simple.
Couldn't be much more.
Now what you do after the image being uploaded, that's totally up to you.
And what is the flow of your application?
You want to move it into just a folder and store the entire path into the database?
Totally.
Your call.
Maybe you want to send it to Firebase s Storage Services or Cloud, and that's up to you however you
want to handle that.
In this case, we are going to just store that into a folder because we are just getting started.
So this is all what we need.
Let's go back and see the package and install that most importantly.
So come on, go back and we're going to go ahead and copy this one because that's exactly what we need.
Let's open up this one here.
Close this server, paste this up and let's install, express, file, upload.
And again, the functionality of multi and any other such packages is really, really similar.
I found that this one is probably the easiest one of all.
So how we're going to get started, really simple.
As soon as you install this package, we need to actually grab it.
So we are going to go at the very top and let's call this one as simply file upload.
So file upload and you already know from where this is going to come in.
So require which is going to be express file upload.
Now you have this file upload object as of this.
And again, as I told you, in case you want to handle any of the things, whether it's JSON, request,
body or anything, we need to use that as a middleware.
So similarly, we are going to be using that similarly so express our JSON was previously.
Now we have copied this one and instead we'll be saying that, hey, if any file upload comes up, you
just handle that and provide me as request files.
There we go.
And it's going to do all the magic in between.
I don't have to worry about any of that.
Now, moving on, once this is all done, all I have to do is upload my file.
So how my strategy is going to be there for it.
Let's go ahead and of course, query.
Yeah, this is fine.
So let's go ahead and duplicate this one.
First and foremost, this is going to be a post request.
So I'm going to go ahead and post.
I want to just store all of this.
Let's call this one as simply course upload.
Now I will not send it to Cloud Ordinary or or anywhere else.
I'll just store that into a folder.
Let's call this one as images.
That's where I'm going to be keeping it.
I accidentally created a file.
Don't want to do that.
Let's delete that.
Move to trash.
I want to create a folder.
So images.
So all of my images will go up here.
Okay, let's go ahead and remove all of this and see how this is going to work on.
So first, I'm going to go ahead and grab this file.
So I'm going to call this one as const file.
Feel free to name it anything, sample, file, file, whatever.
But make sure that in the front end also you're calling it with the same name.
So I'm going to go ahead and call request files dot whatever the name of your file in this case, I'm
going to just call it as file or sample file, whatever you like.
Set.
Once this is being done, now, after that, you have to simply say that where you want to move this
file.
So let's go ahead and change its path.
So I'm going to call this one as simply part.
And again, this is also mentioned in the documentation.
So there I'm going to simply say that give me the directory name and this will give you the project
directory name or the absolute path of the project.
And then on top of that, I'm going to add up my path of slash images inside this.
I want to rename this in this case, there are a lot of ways how you can rename this.
You can generate a unique ID, you can use packages like UUID, which can give you some unique name.
Or in this case, we are going to go ahead for a hack, which is DOT.
Now you're going to see this a lot of places.
And further down the road, I'm going to go ahead and add a JPEG onto this.
It is not an ideal way of storing the images that you are changing every extension to just JPEG.
But this actually saves a lot of things on server.
There are files, specific modules which helps you to shrink the file, lower down the quality, all
of that.
But that's going to go too much as of now.
Okay.
Once this is all being done now, all the things that we have to do is use this file again that we have
created from request file and let's use the MOV command over that.
It takes two parameter.
It simply says, hey, just give me the path and I'll move the file there.
Now if there are errors, you can handle the errors like this so we can go like this and we can simply
say Rez dot send.
Of course I haven't handled the error here, so I'm going to go ahead and pass on a value like true.
Just as a boolean.
Of course I haven't handled the error here.
I should be saying something like if there are errors and false, if there are no errors, then send
true.
But I believe you can do that.
It's a simple final statement.
Okay, this is the basics.
And again, you can store the center path into the database and all of that.
That's up to you.
Let's go ahead and save this one and I'm going to go ahead and now let's go ahead and write documentation
for this entire path so that we can actually test this out.
So I'm going to go into the documentation and I will copy this course query because that's the last
one we got.
Let's go ahead and paste this one.
Okay.
So let's hit enter.
There we go.
Now, this one, I guess is cause upload.
So let's copy this one and paste it up here cause upload.
Now, obviously this is not a get request.
This is going to be post.
I'll still combine it with the string.
There is no such need of doing that, but I'll still do it.
Now in the summary I'll say uploading course.
Image or image.
Yeah, just like that.
Now in here we are going to the parameters are not required, so I'm going to go ahead and remove this
entirely.
What we require is this image always go through the body and that's why we call it as multipart upload
as the form.
So let's go ahead and do that.
We're going to say, hey, I'm sending you something in the request body.
And then I have to mention what kind of content you are sending me.
The content that I'm sending you is not application JSON, but rather this is a part of multipart slash
form and data.
And that's why you're going to see that a lot of React application or Angular application instead of
sending you just state and everything they use and change the things into the form data there so they
create a form data and all of that.
That's exactly reason because you cannot send images in the JSON, you can send the image path, but
it's complex.
Rather it is better to send it in the form data.
Now what is going to be the schema of that?
That is the important part, the schema.
Let's go ahead and say type.
Now here, the type doesn't change as the form data.
The type can still remain as an object because you send multiple of the information.
Now here, I'm going to go ahead and say the properties.
Property's most important thing.
You can send your IDs as strings and name and all of that.
One of the property that is important for me is file and make sure I'm calling it as file.
If you call it a sample file, go ahead and call it a sample file here.
The file is going to be of type string and most importantly, format.
We haven't written the format so far because we didn't need it, but this time the format is binary.
Now, as soon as you save this, the data, the schema, we're not returning the schema as of this type,
but I'm not going to be worried about any kind of response.
You can go ahead and write that on your own.
I'm going to go ahead and in fact, remove this.
And in fact, I'm going to remove this part.
We have already discussed this one, so shouldn't be much more of a deal.
Okay, let's save this and see how many errors we have made so far.
And let's go ahead and open up my browser.
There we go.
So I got you.I hit a reload and this says We have seen.
So this is a course upload up here and notice here it says request body.
Yes, you can mention your IDs and probably you want to pass on further on information.
Maybe it's a user registration form so you can send more information notice here it says multipart form
data this time.
So I'm going to go ahead and try it out.
It says, send me value.
Please don't send that.
I'm going to go ahead and choose an image for here now.
So I'm going to go ahead and choose this image, which is an image of a go file.
And I'm going to go ahead and execute this one as soon as I execute this one.
The response body gives me a true and I can also verify here that the image actually is up here, which
is, of course, a go image.
So there we go.
Told you the handling part of the image is not of a big deal and you can actually do a console log of
the part here, can store that in the database because we are storing that in the folder itself.
Or you can use some services like Cloudera, a W.
S Bucket or maybe firebase or something else.
There is no shortage of such services and handling from here is actually pretty easy.
So told you it's really easy to handle file and let's go ahead and catch up in the next video.