Up next in 10
Node Express to Upload Files to Server Using HTML Form Using multiparty Library in Browser
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:01
uh hello guys uh welcome to this uh live
0:04
stream so in this live stream I will
0:06
show you yet another NodeJS and express
0:09
uh package or library which allows you
0:11
to upload files to the server using an
0:14
HTML form so this will be the
0:16
application we will be building and we
0:18
will have a simple HTML form where the
0:21
user can choose a file and then upload
0:23
that to the server and we'll be storing
0:26
all these image files or any files that
0:28
you upload in the uploads directory
0:31
automatically all these files will be
0:33
stored right here so let me just delete
0:35
everything and start from scratch so we
0:38
have this application right here if I
0:40
choose a particular file let's suppose I
0:43
want to upload some kind of an
0:46
image i select the image this is
0:49
actually you can see it's a JPG file and
0:51
then as I click the upload button you
0:53
will see you will get this notification
0:55
that file is uploaded and uh if I check
0:58
the folder you will see the file will be
1:01
there in the uploads directory so
1:03
automatically the file has been
1:05
transferred and similarly if I want to
1:09
upload any any other file again if I
1:11
choose file click the select the JPG
1:15
file and click upload you'll once again
1:19
see the second file will get
1:21
uploaded so actually the package that we
1:24
are using here is
1:27
multi-arty so this is a very popular
1:30
package
1:31
inside NodeJS which supports parsing of
1:36
HTML forms so the command is simple you
1:39
simply install this package i've already
1:41
installed it it's almost having 578,000
1:45
weekly downloads so now I will show you
1:48
a complete example for this I will
1:51
delete everything and start from scratch
1:55
so first of all just create a uploads
1:57
directory where you will be storing all
1:59
the files which will get uploaded just
2:02
create this
2:04
folder and then we will simply create
2:08
this index.js file so right inside this
2:12
we will import first of all all the
2:14
necessary packages so we'll import the
2:17
express package
2:20
then we also need to
2:21
import the multi-party package as well
2:24
by like this and then we also need to
2:28
import the built-in packages which is
2:30
the file system module and the path
2:35
module and then we will simply
2:38
instantiate a simple express app and
2:41
this express app will listen on 5,000
2:45
port number
2:47
so here we can inside the call back
2:49
function we can simply say that app is
2:51
listening
2:52
on port 5000 and right here we can show
2:56
a simple HTML form so when the user
2:59
visits this homepage you can simply
3:03
say you can send out this file response
3:06
dot send file and in the same
3:09
directory we create this index.html file
3:14
so right here in the root directory you
3:16
will simply create this index html file
3:19
this will be a simple form which will be
3:21
shown to the user and inside this form
3:25
we
3:26
will have a simple
3:30
form so the method of the form will be
3:33
post encoding type multiart form data
3:36
and inside this we will have a simple
3:38
input type file give it a name attribute
3:41
as well and then we'll be having a
3:43
simple button to upload the
3:47
file so here we also need to provide a
3:50
action attribute to this form so
3:53
whenever the form is submitted it will
3:55
be going to this /upload route it will
3:58
be a post request so at this moment of
4:01
time if you go to localhost
4:04
5,000 and if you try to upload a file
4:07
you will get this error message that
4:09
cannot post /upload this post request
4:12
you need to make inside your index.js
4:15
file so now just go to this file and
4:17
just make a simple post request
4:21
/upload so inside this post request you
4:24
just need to
4:28
uh upload the files for uploading the
4:32
files we need to get access to the form
4:34
and here we will be initializing this
4:36
library multi-arty it contains this form
4:39
class and here you need to pass where
4:43
you will be uploading all your files so
4:44
here you need to pass the uploads
4:46
directory so I just created this uploads
4:49
directory right here if you see so we
4:51
just need to provide the location so we
4:54
instantiating this library after this
4:57
this library contains a method of parse
5:01
this function will be responsible for
5:03
parsing whatever data is coming through
5:05
the form it will take this data and if
5:08
any sort of call back it is actually
5:10
call back
5:12
function and all the files will be there
5:15
inside this
5:17
so we need to get access to the file so
5:19
we can easily get access to the files
5:21
using files and file
5:24
zero and then we can send out a
5:26
notification message that your file has
5:29
been successfully uploaded so we can
5:32
send out this
5:33
message so you will see file is uploaded
5:36
so that's all that we need to do and if
5:39
you refresh your application just go to
5:41
localhost 5,000 and here you choose a
5:45
file click on upload and you will get
5:48
this notification that your file has
5:50
been uploaded and if you check the
5:52
directory the file is present and you
5:55
can repeat this for multiple files
5:59
select this one click upload
6:03
so in this easy way you can use this
6:06
library as well which is the
6:07
configuration part is very simple just
6:10
install this package and initialize this
6:12
library by including it and then inside
6:16
the post request you basically provide
6:18
the location where you are saving the
6:20
files and then it contains this parse
6:22
function which is responsible for
6:24
getting access to the file and then we
6:26
simply upload this so thank you very
6:29
much guys for watching this video and
6:31
also check out my website
6:34
freemediatools.com which contains
6:36
unlimited tools regarding audio video
6:38
and image and I will be seeing you guys
6:41
in the next live stream
#Programming
#File Sharing & Hosting