Up next in 10
Node Express Project to Upload Files to Server Using HTML Form in Browser Using Formidable Library
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 uh welcome to this uh live
0:06
stream so in this live stream I will
0:07
show you an example in NodeJS express on
0:10
how to upload files to an server inside
0:15
uh NodeJS express using an HTML form and
0:19
uh in the last tutorial I showed you the
0:22
Malter library in this tutorial I will
0:24
show you one other library which is very
0:26
famous in NodeJS Express which is called
0:28
as
0:29
forbidable f O R M I D A B L E
0:33
forbidable so if you go to npmjs.com
0:36
just search for this
0:39
package this is also similar to Maldder
0:43
but it's also very popular so the
0:46
command is simple simply execute this
0:48
command to install this package i've
0:51
already installed it it's almost having
0:54
13 million downloads it's a pretty
0:57
popular file uploading library inside
0:59
NodeJS and
1:01
Express so apart from that you also need
1:04
the X to install the Express package
1:07
which is used to build the web server
1:11
which is the number one framework for
1:13
building web applications inside NodeJS
1:15
so also install this as well so I
1:17
basically built out this application if
1:19
you see it is running it on localhost
1:23
3000 so if I try to open this in the
1:26
browser I will simply go to the URL
1:29
localhost 3000 so it will actually be
1:34
showing a simple
1:39
form so let me just restart the
1:42
application
1:46
so it will be having a simple form where
1:48
we will be able
1:49
to upload
1:52
files so we have this choose file button
1:55
so here you can actually select any file
1:57
it can be image video or any sort of
1:59
file so if I
2:02
select let me
2:05
just select image so as soon as I select
2:08
this JPG image and just as I click the
2:11
upload button you will get this
2:13
notification after uploading file is
2:16
uploaded it has given a random name and
2:19
plus the extension so it you already
2:22
created this uploads directory where all
2:24
the uploaded files will be there so you
2:27
can see this is your image file which is
2:29
successfully uploaded we can similarly
2:33
we can upload more files if I go
2:36
to select the file click on upload and
2:39
once again as soon as you upload the
2:41
file you will be receiving this file in
2:44
the folder so I will show you step by
2:47
step how to configure this so let me
2:49
delete everything and start from
2:52
scratch
2:54
so just install these two packages after
2:57
installing
2:58
it now
3:01
just first of all we need to start the
3:04
express server so for this we need to
3:06
require it first of all so we simply
3:08
require the express
3:12
server and then we also need to require
3:16
the formatable package as well which
3:19
will be required for file upload so we
3:21
can import this like this
3:25
then we also need the path module as
3:27
well which is a built-in module of
3:32
NodeJS and then we initialize a simple
3:36
express application so we initialize it
3:39
and this application will be listening
3:42
on so we use the listen method so it
3:46
will be listening on port 5,000 and we
3:49
can give it a call back function so here
3:51
we can simply console log a message that
3:54
your app is listening on port
3:59
5,000 so now we can
4:02
simply bind a simple route so when
4:05
someone goes to the homepage we can
4:08
actually show a index html file right
4:11
here for this we can create this file
4:14
right here index
4:17
html so this will be the file which will
4:20
be shown to the user when someone goes
4:23
to the homepage and right inside this
4:26
file we will have a simple form where
4:29
the user will be able to select a file
4:33
then upload this to the
4:36
server so this method will be post
4:40
encoding
4:41
type this attribute is required whenever
4:44
you're working with files so encoding
4:46
type
4:47
multipart/form data and inside this we
4:50
will have a simple input field input
4:54
type file and uh we'll give it a name
4:58
attribute here and then we will have a
5:00
button which will say upload so button
5:04
type will be of
5:07
submit so this is a simple HTML form and
5:11
now to show it we can simply reference
5:13
this file here so we can send this
5:18
file so it is present in the same
5:20
directory index.html so we are simply
5:24
showing this index.html file when
5:26
someone goes to the home route so if I
5:28
refresh localhost 3000 you will see this
5:33
HTML form is shown right here
5:43
me just restart the application
5:48
itself so at this moment of time if you
5:51
try
5:53
to so it is localhost 5,000 because the
5:57
port number that I configured is
5:59
localhost 5,000 and if you try to submit
6:02
a file click on upload you will get this
6:05
error because we haven't defined the
6:06
post request yet so just go to this
6:10
index.js and first of all you need to
6:13
import imported this formidable
6:15
module and right here we need to
6:18
configure this post
6:21
request
6:26
slashupload so inside this post request
6:29
we now just need to go to the form and
6:31
write here just add this attribute of
6:33
action
6:35
this action
6:37
attribute will redirect the form as soon
6:41
as you submit the form it will go to
6:43
this post
6:46
request/upload so whenever it goes to it
6:49
we need to actually get the information
6:51
of the form for getting the information
6:54
we initialize this formidable library it
6:57
contains this function of incoming form
7:00
and right here we pass an object so this
7:04
object contains two properties so the
7:06
first property here will be where you
7:09
need to store all your files so upload
7:11
directory so here we'll be referencing
7:14
the directory that we
7:16
configured which will be uploads so just
7:19
make sure that you create a directory
7:21
where all your files will be stored so
7:23
I'm just creating this uploads
7:25
directory so all the uploaded files will
7:28
be going there so that's why we are
7:30
referencing there and now the second
7:32
property is if you want to keep the
7:34
extension it's a boolean parameter so I
7:37
will say true i need the extension as
7:40
well after you do this now it contains a
7:44
function of
7:47
parse so it is used to parse the data
7:50
which is coming and then it's a call
7:52
back
7:56
function like this so if any sort of
8:00
error take place then we can show a
8:02
error message and return the status of
8:05
500 if no error is there if the files
8:09
are
8:10
uploaded so it's a simple function call
8:13
back function whenever all your files
8:14
are uploaded this function will fire and
8:18
now to call this function we first of
8:21
all get all the uploaded
8:24
files by using
8:26
this files
8:29
dot so here you just need to make sure
8:32
that whatever name attribute that you
8:34
have given this needs to be the same so
8:36
right in the index html file we given
8:38
this name attribute file this needs to
8:41
be
8:42
same so after you do this now we
8:48
can extract the file
8:53
name once the file is uploaded we can
8:56
easily get the file name by using this
8:59
the uploaded file dot file path
9:03
from that file path we can
9:08
extract the file name and then we can
9:10
simply send out a simple notification
9:13
message that your file is successfully
9:18
uploaded so that's all that the
9:20
configuration process is for this
9:22
formidable library so if you refresh
9:26
your
9:29
application go to this and again choose
9:32
a file click on upload you will see
9:36
files is not defined on line number
9:43
25 uh it is saying files is not defined
9:52
uh just make sure that you define
9:55
this
9:59
files sorry this needs to be in the same
10:09
function oh sorry this needs to be in
10:11
the
10:12
same i
10:17
forgot so just need to make sure that
10:20
you write all this code in the parse
10:22
function so write in this function that
10:26
you have
10:27
form.parse you just need to make sure
10:29
that you write all this code right here
10:31
in this
10:34
so so now this files is accessible right
10:37
here all the files which are uploaded so
10:39
here we can get
10:40
this so again if you refresh
10:44
now select the file click on upload so
10:47
you will get this notification that file
10:49
is uploaded and you will get this file
10:52
in the uploads
10:59
directory so if I try to upload any
11:02
other file right
11:05
here click on upload again your file
11:09
will be uploaded
11:12
so in this easy way guys you can use
11:13
this package of formidable in NodeJS and
11:16
express for file uploading it's really
11:19
easy setup to do and thank you very much
11:23
for watching this video please hit that
11:25
like button subscribe the channel as
11:27
well and also check out my website
11:32
freemediatetools.com guys which is a
11:34
tool-based website which contains
11:36
unlimited number of
11:37
tools and thank you very much for
11:40
watching this
11:42
uh live stream