Up next in 10
Build a Node.js NestJS REST API to Upload Files to the Server Using HTML Form in Browser & TS
Jun 7, 2025
Get the full source code of the application here:
Official Website:
https://freemediatools.com
Show More Show Less View Video Transcript
0:02
uh hello guys uh welcome to this video
0:04
so in this video i will show you a new
0:06
framework of nodejs which is very much
0:09
popular which is called as
0:12
nestjs so if you just write nestjs on
0:15
google this website will come nestjs a
0:18
progressive nodejs framework uh it's
0:21
very popular as uh i you can say it's a
0:25
number two framework uh just behind
0:26
express so this is their official
0:29
website and i will show you in this
0:31
video how to build a simple rest api by
0:34
which you can actually upload files to
0:36
the nestjs server so let me just show
0:40
you the application that we will be
0:42
building so we will have a simple html
0:44
form right here if you can see on the
0:46
screen where we will allow the user to
0:48
simply select a file from their
0:51
operating system and then if they
0:53
select we have the upload button as well
0:56
if you
0:59
see and this is my nestjs application
1:03
structure you will see we have a uploads
1:05
directory currently this directory is
1:07
empty so we'll store all the uploaded
1:09
files which will get uploaded in this
1:11
directory so now let me just
1:13
uh select a file here from my computer
1:16
so as i select this this can be any
1:19
image video file as well so i selected
1:22
this jpg file here and then as soon as i
1:24
click the upload button you will see it
1:26
will return a message to you that your
1:28
file has been successfully uploaded and
1:31
uh this file will get stored inside this
1:35
folder in this uploads folder you can
1:38
see it has been successfully uploaded
1:41
and we can repeat this process one more
1:44
time let's suppose i select a different
1:47
file once again you will see the file
1:50
will get uploaded
1:51
so i will show you how to build this
1:53
functionality inside nestjs if you're
1:55
starting it out you need to install
1:58
this their cli
2:01
so they do
2:03
offer so this is the command that you
2:06
need to execute inside your terminal
2:09
npmi at the rate nest js/ cli simply
2:14
copy this command and open your
2:19
terminal and just install it globally
2:23
just add this flag here which is
2:26
-ashg and uh it will install nestjs cli
2:30
globally inside your system i have
2:31
already done that and then you just need
2:34
to execute this
2:36
command just open your terminal let me
2:39
just show you the command
2:42
nest new and then followed by your
2:44
project name so whatever project name
2:47
that you have let's suppose hello world
2:49
is your project name
2:52
so this this will create a new nestjs
2:56
project inside this directory it will
2:58
create a new directory hello world and
3:00
then it will create the application
3:02
files i've already created this uh
3:04
simple project here so i will start from
3:07
scratch this is actually the directory
3:08
structure
3:10
we have the source folder inside this we
3:12
have the controller file it's using
3:15
javascript it's not using javascript it
3:18
is using typescript which is a
3:19
supererset of javascript so we have this
3:23
app.controller.ts
3:24
file so let me just start from
3:30
scratch so the hello world application
3:33
looks something like this
3:38
so we have this module file
3:41
app.module.ts similar to angular here
3:43
you will register all your third party
3:45
modules that you will install so we have
3:48
this main file here which is your
3:50
controller file
3:52
app.controller.ts so it's similar to
3:54
angular if you have studied angular you
3:56
you will know what it is it looks
3:59
something this if you are using external
4:01
service you will put your service inside
4:03
app.ts service.ts so the main two files
4:06
is this controller file and if you want
4:09
to launch this application you will
4:11
simply write this command here just move
4:14
to the application folder and just run
4:16
run this command npm run start so this
4:19
will start your application at the
4:22
default port number which is
4:24
3000 and uh this will be simply hello
4:27
world application if you see if i open
4:29
this it is showing me hello world now if
4:33
you want to integrate the file upload
4:35
feature you need to install some modules
4:37
for this and
4:40
uh you need to install this module at
4:44
the rate nestjs
4:47
platform
4:48
express this is the first package you
4:51
need to
4:53
install so this will be the package
4:56
here so the command is simple simply
4:59
execute this command and the second
5:01
module is the file upload module which
5:05
will be we are using malar which is a
5:07
very popular file upload library inside
5:10
nodejs you also need to install this as
5:12
well npmi
5:14
malter just installing after installing
5:17
both these packages you also need to
5:19
install the dev types as well
5:23
just go to your terminal and uh just see
5:27
this command npm install
5:30
d-save-dev and then add the rate types
5:33
/express add that rate type/maltter this
5:36
is done because you are doing it in
5:39
typescript not javascript so types are
5:41
required so just install this as well
5:44
this is
5:46
mandatory and after that now we need to
5:48
register our module so for registering
5:51
it we need to go to this file here app
5:53
domodule.ts file so just open this file
5:56
and right here we need to register some
5:57
modules and here you just need to go to
6:00
this imports array by default it is
6:02
empty just go to this and need to
6:05
register first of all the malar module
6:09
it will automatically get imported you
6:11
will see by vs code import malter module
6:14
from this after that it contains this
6:16
function which is register and we need
6:18
to register this module and here you
6:21
need to provide the destination where
6:23
you will be uploading your files so here
6:25
we are simply telling the folder path so
6:28
i basically created a folder here of
6:30
uploads if you see so just create a
6:34
uploads
6:36
folder right here inside your root of
6:38
your project simply create this folder
6:40
you can call this anything i'm just
6:42
calling it uploads and then you just
6:44
need to give the location here that's
6:47
all
6:48
after doing this that's all that we need
6:50
to do right here in this file so now you
6:52
can close this file and then move to
6:54
this file which is
6:56
app.controller.ts
6:57
file and inside this file here we need
7:01
to make some changes so first of all we
7:03
need to import the necessary modules
7:06
first of all
7:07
the the malter module we have this
7:11
method here disk storage coming from
7:13
from malar which is a file upload module
7:16
and then we need to simply import all
7:19
these
7:21
things first of all the controller then
7:24
the get post these are all methods which
7:28
is there upload file and uh use
7:33
interceptors this will all be coming
7:35
from the basic
7:39
nestjs so in double quotes you write at
7:42
the rate nestjs /
7:46
so all these things will be coming you
7:48
will see use
7:51
interceptors and one more thing we need
7:53
to import is the actual module that we
7:56
installed here which is file interceptor
7:59
which will be coming from this add the
8:01
rate
8:03
nestjs/platform express so these are the
8:05
two third party modules that we imported
8:07
and this is the built-in module nestjs
8:09
common we have these bunch of functions
8:12
controller get post upload file user
8:15
interceptors now we just need to create
8:18
a bunch of controllers so now in nexjs
8:22
if you see this is add the rate
8:23
controller/ so now this becomes a
8:25
controller this is get method similarly
8:28
we have the post method as well so now
8:31
we just need to delete this instead of
8:33
that we need to show a
8:36
form right here inside this get request
8:40
we will put a method here get form so we
8:43
will show a simple html form to the user
8:46
where the user will be able
8:49
to upload a file so
8:51
return back tick symbol and right here
8:54
you'll write the
8:56
html code here which will be a simple
8:59
form and you'll provide an action here
9:03
so whenever the form submits which
9:05
location you want to redirect the user
9:07
so i will say /upload and then here you
9:10
need to provide the method so in double
9:12
quotes you will write post and then you
9:15
will have the encoding type which will
9:19
be
9:22
multipart form data so this is a simple
9:25
html form guys we have three attributes
9:28
action method and encoding type so
9:30
inside this we will actually have two
9:32
parameters first of all a input type of
9:36
file and we'll also be giving a name
9:38
attribute of file as well after that
9:40
we'll have a simple button to submit the
9:43
form which will i will call this as
9:48
upload i will close the button tag and
9:51
right here you'll just put the type
9:53
parameter which is submit so this is
9:56
your simple form if you refresh your
9:58
browser right
10:00
here if i again go to localhost 3000 now
10:03
you will see a instead of hello world i
10:07
think you need to restart your
10:08
application whenever you make changes so
10:10
again say npm run
10:13
start so it is saying that
10:16
uh uploaded file is declared here
10:22
controller uh let me just see i think it
10:26
is already yeah so it's already declared
10:30
this nestjs common so i just need
10:34
to delete this line
10:37
here just paste
10:43
it so this is a drawback every time you
10:46
make a change you again need to say npm
10:48
run start so that's the diff it is
10:51
saying upload
10:53
file let me for now just delete this
10:56
upload
10:58
file later on we will make this so
11:03
again so now you will see the
11:05
application is now working you will now
11:08
see a form here instead of hello world
11:10
message so at this moment of time if i
11:12
try to upload a file you will get this
11:15
error message cannot post/upload not
11:18
found so now we just need to make this
11:20
route here post route so as soon as we
11:23
submit the form we now need to make a
11:25
simple post route so we simply say add
11:29
the rate post and here we'll mention the
11:31
route here which is in single quotes
11:34
upload and here we'll define a simple
11:38
interceptor use interceptors and here
11:42
inside this we will say file
11:46
interceptor for uploading a
11:49
file so this is a syntax here in next.js
11:52
and here you will provide the storage of
11:54
malar so we already imported the dist
11:57
dick storage here you will see that from
11:59
from malter so uh inside this you need
12:03
to pass an option again the destination
12:06
where you are storing the files so we
12:08
are storing it in the uploads directory
12:10
the second option is the actual file
12:12
name that you will give so this will be
12:14
request file call back
12:17
and we will simply call the call back
12:20
function and then the file name so which
12:23
we will get using file dot original name
12:26
so this we have defined this upload
12:29
request here as soon as you submit the
12:32
form this will come to this code right
12:34
here and uh now we just need to define
12:37
after this the actual function which
12:41
will upload the file for
12:46
us so this i will call this as upload
12:49
file
12:51
so after this here you will simply
12:55
define this add the rate uploaded
13:00
file and is of the type here express
13:03
malter dot
13:06
file and right here we after uploading
13:09
it we will return a simple message to
13:12
the
13:13
user that the file
13:17
uploaded and we will also give the file
13:19
name as well in the
13:22
response which will be file dot original
13:25
name so this is the syntax guys all the
13:29
source code i have given in the
13:30
description of the video if you still
13:31
have some doubt you can do
13:37
this and i think the application is
13:40
complete if i now test it again go to
13:44
localhost
13:45
3000 and just make sure that you restart
13:48
again the
13:58
application so if i choose a file here
14:01
click upload you will see you will get
14:03
this notification file uploaded it will
14:06
also assign a random name to the file
14:08
and it will return this file name so if
14:11
you check your uploads directory you
14:13
will see the file is successfully
14:15
uploaded and if i try this for the
14:18
second time if i select a different file
14:21
here and again you will see the same
14:23
result the second file will also get
14:26
uploaded so in this easy way you can
14:28
configure this uh file upload
14:30
functionality inside nestjs
14:33
it's a very popular framework many
14:36
people use it instead of express if you
14:40
are comfortable in typescript you should
14:42
definitely use this framework uh and it
14:45
is very easy to use and i showed you
14:48
step by step on how to upload files
14:50
using this using malar uh thank you very
14:54
much for watching this video and also
14:56
check out my website freemediatools.com
14:59
uh which contains unlimited tools
15:02
regarding audio video and
15:04
image and i will be seeing you in the
15:07
next video