Up next in 10
Build a Node.js Fastify API to Upload Files to the Server Using HTML Form in Browser Web App
0 views
Jun 7, 2025
Get the full source code of the application here: Official Website: https://freemediatools.com
View Video Transcript
0:03
uh hello guys welcome to this live
0:05
stream so in this live stream I'll show
0:07
you another framework of NodeJS which is
0:09
very popular and we'll build a simple
0:12
API to upload files to the server using
0:15
HTML form right in the browser
0:18
itself so the framework name is
0:21
Fastify uh let me just show you so if
0:24
you just search fastify this is actually
0:26
a alternative to ExpressJS it's a fast
0:30
and low overhead web framework for
0:32
building web applications using NodeJS
0:35
this is their official
0:36
website and we have basically built out
0:39
a very simple web application a simple
0:42
API for uh uploading files to the server
0:46
so we have created this folder uploads
0:48
folder you will see all the files will
0:50
get uploaded right in this folder and we
0:53
have this index.html form and this is
0:56
your basic fastifi web application so if
1:02
I it is you can see it is running on
1:04
localhost 3000 so if I try to open
1:09
this if I visit localhost 3000 this is
1:13
actually a
1:15
web a form as you can see it is having a
1:18
simple form where we can upload files so
1:21
we can choose a
1:23
file and as soon as I select any file
1:28
here so let's suppose I select this JPG
1:31
file as soon as I click the upload
1:33
button you will see I will get this uh
1:36
JSON response back that your file has
1:39
been successfully
1:40
uploaded so you get this JSON response
1:44
back message it's uploaded and if I
1:47
check the directory you will see the
1:49
file is successfully uploaded you will
1:51
get this file and similarly we can
1:53
repeat this process if I select a
1:56
different
1:58
file click on upload once again the file
2:01
will get uploaded and in this easy way
2:05
you can build out this application so I
2:07
will now show from
2:09
scratch so let me delete everything and
2:12
start from scratch so for building this
2:15
application you need some packages so
2:19
just go to
2:20
npmjs.com and the very first package you
2:22
need to install is fastifi which is
2:25
actually the web framework that we are
2:27
using for building this
2:29
application so it's an alternative to
2:32
expressjs so simply execute this command
2:35
to install this i've already installed
2:37
it almost having 3 million weekly
2:40
downloads apart from that you also need
2:43
this package as well pump package just
2:47
install this package as
2:50
well and apart from that we also need
2:53
this third package which is specifically
2:56
built for uploading files using fastify
3:00
so
3:01
fastify/ multiart this is you can say
3:04
it's a plug-in or may it's a actual
3:08
middleware specifically
3:11
for fastify framework so the command is
3:16
simple also install this as well so
3:19
these are the three packages which are
3:20
required and now I will just create a
3:24
simple index.js file and just create a
3:27
uploads directory where you will store
3:30
all the uploaded files so now inside
3:33
this we will
3:35
start requiring all the necessary
3:37
packages so first of all we will require
3:40
the fastify
3:41
package and right here we will require
3:44
the logger package as
3:48
well and then we also require the
3:51
built-in path module of
3:54
NodeJS like this and then also the file
3:58
system module as well the built-in
4:01
module and then we'll be requiring the
4:02
pump module that we installed
4:07
after that we also need to register so
4:11
in this way we can register a plug-in
4:13
inside fastify we have the register
4:16
function so we are simply calling
4:18
fastify.register and here we'll be
4:20
requiring that package that we installed
4:23
which is add the rate
4:27
fastify/multipart so we register this
4:30
plug-in and now to start this
4:32
application it's very simple we have
4:34
again this listen function which is
4:36
similar to express so this will actually
4:38
start this web application on this port
4:41
number here you need to pass the port
4:43
number so I will say port number
4:46
5,000 and then it actually takes a call
4:49
back
4:51
function right here so here you can
4:54
simply say a console log statement that
4:57
your app is
4:59
listening on port 5,000 so if you
5:03
refresh your terminal you will see your
5:06
application will start if I show
5:12
you sorry I just make a mistake here so
5:16
now you'll see your app is listening on
5:18
port 5,000 so app is started we just
5:21
need to add a simple get route to that
5:24
web application so here we can simply
5:26
say
5:28
fastify.get and here whenever someone
5:30
goes to the homepage we will actually
5:33
show
5:37
a easy way you can do
5:43
this we can add this get request so here
5:47
we can simply say reply dot type and
5:52
here we will show a simple HTML form
5:56
so for sending this we use the send
6:00
function and here we'll be sending this
6:03
HTML file so read file sync so here just
6:07
need to create a index html file in the
6:10
same
6:12
directory so this is the syntax here we
6:16
basically have a get route when someone
6:20
goes to the
6:21
homepage we are sending this index html
6:24
file here so we just need to create this
6:25
file in the root directory
6:28
so right here this will be a
6:31
simple HTML
6:36
form so here the action will
6:39
be let me paste it and then explain you
6:42
so this is simply a form which contains
6:47
uh the form here action redirects the
6:50
user
6:51
to we can also write like this as well
6:55
/upload method will be post encoding
6:58
type multiart form data and then inside
7:00
the form we have a input type file and
7:03
we have given this name attribute of
7:04
file this is necessary mandatory after
7:07
that we have a button of upload so we
7:10
are actually having this form to accept
7:12
file input so if you refresh your
7:15
application now just navigate to
7:18
localhost 5,000 you will actually see
7:21
this form appearing you will see a
7:23
choose file
7:24
button we have this form so if I try to
7:28
upload a file here you will see this
7:30
error will be there that route post
7:33
upload not found so now we need to
7:35
create this route 404 error is coming so
7:39
right here at the bottom side we can
7:41
create another route here this time this
7:43
will be a post
7:44
route so for uploading files so
7:49
/upload again you write this async
7:53
function request
7:56
reply and here first of all we will get
7:59
access to the file for get access we
8:02
will use await request dot file
8:06
this is only valid for single file
8:08
upload so we are uploading a single file
8:11
so we are getting access to that file
8:13
that is submitted through the HTML form
8:15
and then we need to
8:17
save to which location so here we need
8:20
to provide the location right here so we
8:23
need to create uploads
8:25
directory so we just already created
8:28
this directory right here simply create
8:30
a directory of uploads and right inside
8:33
this directory we'll be storing this
8:35
file data dot file
8:38
name so after providing this location we
8:41
will use this pump module we'll pump
8:44
this file which is data file to this
8:48
path which is
8:55
fs so this is actually the function
8:59
which is responsible for uploading files
9:01
so we using this pump
9:04
module so data do file as you can see we
9:15
are so you can see that data file after
9:20
that we
9:21
can send out a simple message to the
9:24
user that your file has been
9:25
successfully uploaded that is reply send
9:28
and then we are sending a simple message
9:31
message uploaded and actually the file
9:34
name data do
9:36
file so that's all that we need to do
9:40
right
9:46
here so if you refresh your
9:52
application and if you try to upload a
9:59
file it is
10:02
saying let me see what is the error
10:09
here
10:14
request i think there is some kind of
10:16
typo mistake let me just
10:21
paste so now it is fixed here you will
10:28
see so if I rerun the application you
10:31
will see the application is now
10:32
listening on port 5,000 if I refresh it
10:36
so if I choose the file and uh try to
10:40
upload it you will get this message from
10:42
the API that your file is uploaded and
10:44
it also gives the file name that it has
10:46
given so if you see the uploads
10:49
directory your file has been
10:50
successfully uploaded to the
10:53
server and we can repeat this process so
10:56
if I want to upload a different file
10:58
right here click on upload you will see
11:01
again the file is uploaded and you get
11:03
the second file which is uploaded so in
11:05
this easy way you can use this uh
11:07
fastify framework guys which is an
11:09
alternative to express in NodeJS to
11:11
actually upload files to the server i
11:14
shown you step by
11:15
step so the error was here you don't
11:18
need to add
11:20
this that was the error so I just
11:24
eliminated this and that fixed this
11:26
error so this is the complete example
11:28
that I showed you in this video uh thank
11:30
you very much for watching this video
11:31
please hit that like button subscribe
11:33
the channel and also check out my
11:35
website freemediattools.com
11:38
uh which contains unlimited tools
11:41
regarding audio video and image and I
11:44
will be seeing you in the next live
11:46
stream