Up next in 10
Node Express Project to Upload Files to Server Using HTML Form in Browser Using Formidable Library
127 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
#File Sharing & Hosting