Up next in 10
Build a Node.js Hapi.js 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:06
uh hello guys welcome to this video So
0:08
in this video I will show you a NodeJS
0:12
uh new framework in order to how to
0:15
build an API to upload files to the
0:17
server which is HappyJS Uh if you just
0:22
search on Google this is a new
0:24
framework similar to Express.js So this
0:27
is their official website
0:30
happy.dev So it's a simple secure
0:32
framework that developers trust So this
0:34
is their official website So I built out
0:37
a very simple API which allows you to
0:40
upload files directly from an HTML form
0:43
So we have this HTML form right here
0:45
where the user will select a file and
0:48
all the uploaded files will be stored
0:50
inside this uploads directory So
0:52
currently this directory is empty So now
0:55
this application is running on localhost
0:58
3000 So if I go to the browser and if I
1:02
try to upload a
1:03
file So now you will see this is
1:06
actually a form which is shown to us Uh
1:08
a choose file button is there as well We
1:11
are also got a upload button So if I
1:14
choose a file here it can be any file It
1:17
can be a image file or video as well So
1:21
as I select the image file you will see
1:23
the JPG file has been selected and if I
1:25
click the upload button you will see
1:27
this notification that your file is
1:29
uploaded and if you check
1:32
the so now if you see the file is
1:35
successfully uploaded and it will be
1:37
stored inside this directory and if I
1:40
try to upload any other file here if I
1:44
repeat this
1:46
process so once again you will see the
1:48
second file will also get uploaded
1:50
downloaded and it will be stored inside
1:51
this uploads directory So this will be a
1:53
simple application we will try to build
1:56
from scratch So let me just delete
1:58
everything and start from
2:02
scratch So first of all you just need to
2:05
install this
2:08
package So if you go to npmjs.com just
2:11
search for this package which is at the
2:14
rate
2:18
happy/ So this is a
2:20
HTTP web
2:22
server framework you may say similar to
2:25
ExpressJS So simply install this by
2:28
executing this command I've already
2:30
installed it It's almost got
2:34
8,000 800,000 weekly
2:37
downloads So once you download this once
2:40
you install
2:41
this inside your index.js JS file you
2:45
simply
2:46
require the
2:49
packages So we simply require the
2:51
packages first of all at the rate happy
2:54
So we require this package Then we also
2:57
require the built-in file system package
3:00
as well and the
3:04
path So after requiring all the packages
3:07
we will initialize this happy js server
3:11
So for this we will create a init
3:15
function So this init function will
3:19
be a async function So this is a very
3:23
basic way by which we can initialize a
3:26
simple server inside this framework So
3:29
now to start the server we call this
3:31
happy and it contains this function of
3:35
server To create a brand new server here
3:38
you need to provide the option of which
3:40
port number So I will say 5,000 and then
3:44
there is an option here which will be
3:46
the host option So here if you're
3:49
developing on local host you will
3:51
provide here local host So in this easy
3:53
way you basically create a happy
3:56
server and then now to create some
4:00
routes we create routes like this We
4:03
have the route function and right here
4:05
we specify the
4:07
method So method will be get and here
4:10
you provide the path This will be the
4:13
homepage and then the handler function
4:16
So this function will handle this route
4:19
and here we can actually return a simple
4:23
file index.html So very simply we are
4:26
returning a HTML file index HTML file
4:31
whenever someone visits the homepage of
4:34
the application So we initialize this
4:36
route So now just create this simple
4:39
index html file which will actually
4:41
contain the
4:44
route So let me delete these image files
4:47
So right here this will be a simple
4:52
HTML file which will contain the
4:56
route So we have this simple form here
5:00
So this form actually contains input
5:03
file input type file name attribute that
5:05
we have given is file and then we have
5:08
the button to upload the file and inside
5:11
the form we have an action here If you
5:13
see whenever someone submits they will
5:16
be redirected to /upload This will be a
5:19
simple uh post request and encoding type
5:22
multiartform data So if you refresh your
5:25
application you will actually see if you
5:27
visit localhost 5000 you will actually
5:30
see
5:31
this HTML form which will
5:34
be and there is some kind of error is
5:38
there The error is there because we
5:40
haven't started the server So now to
5:42
start the server we just need to write
5:43
this line which is await server and then
5:47
we start the
5:48
server and then you can console log a
5:51
simple line that app
5:53
is listening on port 5,000 So if you do
5:57
this and visit now you will see this
6:00
HTML file will be redirected to you
6:04
whenever we visit the homepage So if you
6:07
try to select a file here and upload you
6:11
will get this error that that route is
6:13
not existed You will get this JSON error
6:16
message not found Now we just need to
6:18
create this post route Similarly using
6:22
the same syntax server and create a new
6:26
route This time the method will be of
6:29
post and the path will be same
6:34
/upload and then the handler
6:38
function So right
6:40
here inside
6:43
this before this we need to pass some
6:46
options to this post request This
6:48
options will be an JSON object which
6:51
will be having the payload property and
6:54
inside this you will put the output to
6:56
be as
6:57
stream and parse to also true and
7:01
multipart to also true So these are
7:04
three option that you need to pass here
7:06
in the
7:07
payload and then you can even control
7:10
the maximum number of file size that
7:14
each file should So here you can control
7:17
by passing this property max bytes you
7:20
can control the size of the file as well
7:22
So in this way and then after that we
7:26
have this handler function which will be
7:29
responsible
7:33
for we have this
7:37
request and then first of all here
7:39
you'll be getting the access to the file
7:42
using the request object request
7:45
payload We will extract the file here
7:49
from the request.payload object After
7:52
getting access to the file we can get
7:54
more properties related to it File
7:56
dotappy dot file
8:00
name and then file
8:03
path So now where you need to store this
8:06
So I have already created a folder in
8:08
the same directory uploads So now here
8:11
you just need to provide the path So
8:13
here I'm basically providing this
8:15
uploads directory and passing this file
8:17
name
8:20
Just create a uploads directory right
8:21
here And after that now we simply need
8:24
to transfer this file to that location
8:28
So await we'll use this file system
8:30
module for this write file method file
8:34
path This will actually write the file
8:37
here to that specific path
8:43
After doing this we will simply create
8:47
the stream object using this create
8:51
write
8:52
stream file
8:57
path After you do this we can simply
9:01
pipe file.pipe
9:16
uh like
9:17
this After piping this we can simply
9:20
return a simple message to the user that
9:23
your file is successfully uploaded We
9:26
can return this message a JSON message
9:29
file is uploaded This is a full example
9:33
code guys You can see all the source
9:35
code will be given in the description of
9:37
the video So if I test this video now if
9:41
I go to the
9:43
application and select a
9:46
file you will see this message is
9:48
returned to us that file is uploaded And
9:51
if you check your uploads directory you
9:53
will see the file is uploaded with a
9:56
random name given to the image file plus
9:58
the extension
10:00
And if I repeat this process choose a
10:03
different
10:04
file and same thing will be happening
10:07
You will get the second file uploaded as
10:09
well So this is a very minimalistic
10:11
framework guys Great alternative
10:14
to ExpressJS You can use this inside
10:18
NodeJS happy JS framework name So I've
10:21
built out a complete API for uploading
10:23
files in the server using HTML form And
10:27
thank you very much for watching this
10:28
video and also check out my website
10:31
freemediatools.com
10:33
uh which contains unlimited tools
10:35
regarding audio video and
10:38
image I will be seeing you in the next
10:40
video