Up next in 10
Node.js Express to Upload Files to Server Using HTML Form in Browser Using Multer Library
0 views
Jun 7, 2025
Get the full source code of the application here: Official Website: https://freemediatools.com
View Video Transcript
0:09
uh hello guys welcome to this uh live
0:11
stream so in this video I will show you
0:13
how to upload files to the server inside
0:17
NodeJS and express
0:20
application uh for this we will be using
0:23
uh the Malter library which is uh used
0:27
to upload files to the server and for
0:31
this we will be using the malter
0:35
library and uh let me show you the demo
0:38
of this application how this application
0:40
works so this is the directory structure
0:43
of this application we have the NodeJS
0:46
application which is stored inside
0:47
index.js we have the simple index
0:51
html document so this opens in the
0:55
browser
0:57
so so it's a simple web application so
1:00
here you can see the HTML form right
1:02
here so we have a choose file button so
1:05
here the user may select any file that
1:08
they want to upload to a NodeJS express
1:11
server so then we have the upload
1:13
buttons
1:16
so so as I click the choose file button
1:19
you can select any file it can be image
1:22
video or any sort of file so let me
1:24
select this image file so as I select
1:26
this image file you will see now we have
1:28
the button of
1:30
upload so as soon as I click the upload
1:33
button you will see we have created a
1:35
folder inside our NodeJS Express
1:38
application and all the uploaded files
1:40
will be stored inside this uploads
1:43
folder so as I click the upload button
1:46
you will see your file is successfully
1:48
uploaded and we get this notification
1:51
message and if I cross check right here
1:54
you will see the file is successfully
1:56
uploaded this image file and it is
1:58
stored inside this uploads folder
2:01
so this is a very simple application and
2:04
for this you need to
2:06
install the express package which is
2:09
essentially the web
2:11
server inside NodeJS so it's a fast
2:15
based web
2:16
server if you want to create a web
2:18
application you can install this number
2:21
one framework of NodeJS so the command
2:23
is simple i've already installed it and
2:27
secondly you need this package for file
2:29
uploads inside express so if you want to
2:33
upload any file you also need this
2:35
module so the command is simple npm
2:39
malter so I've already installed both
2:41
these modules so now just
2:45
create the index.js file so we'll be
2:48
starting it from
2:51
scratch and you also need to create a
2:53
index html
2:55
and the very first thing you need to do
2:57
just create a uploads folder right
3:00
inside your directory structure where
3:02
all the files will be stored so just
3:04
create this uploads folder now go to
3:07
this index.js
3:09
file and right here we will be
3:12
instantiating the express server for
3:15
this we just need to
3:19
require and then we also need to require
3:21
the malter package as well
3:26
so like this and then we just need to
3:29
initialize a new
3:34
expresser and this application will be
3:36
listening on a specific port number so
3:39
we can simply do this and just have this
3:43
notification that is app is listening
3:47
on port 3000
3:51
so so this is a basic structure of a
3:55
express application so we require the
3:57
packages then we instantiate a new
4:00
express app then we are listening this
4:03
on 30,000 port
4:05
number and then we can simply make a get
4:08
request so when someone opens the home
4:11
route they can
4:17
simply go to the homepage
4:22
so for this we just need to create a
4:24
index html
4:28
file so right here we can
4:32
simply send this file which is present
4:35
in the same directory so we can simply
4:38
say index html so now we just need to
4:41
create this file which is index.html
4:44
when someone opens the homepage of the
4:47
application so here we simply create
4:49
this index html
4:52
file and this will be a simple index
4:55
html file so here it will contain a
4:58
simple form where the user can select a
5:01
file so this form tag this will contain
5:05
this action so when someone submits the
5:09
form they will make the post request to
5:14
this
5:15
route so we will make this route in the
5:18
express app here
5:20
so so here the method here we need to
5:23
also give the method method will be
5:26
post and encoding type so whenever
5:30
you're working with files you need to
5:31
give this attribute app multiart form
5:34
data and inside this we will have input
5:38
tag here input type
5:40
file and
5:44
uh here you can give this name attribute
5:47
which is very much important whenever
5:49
you uploading files this name attribute
5:53
as very much
5:56
required and then we will have a simple
5:59
button to submit the form so here we can
6:02
simply say
6:03
upload and this button type will be of
6:09
submit so if
6:11
you start your application just say node
6:16
index.js so it will start this
6:18
application on port 3000 so if
6:22
I open the browser simply go to this
6:26
localhost 3000 you will see this form
6:30
will be there so here the choose file
6:33
button so now what we need to do right
6:36
here we now need to create this post
6:39
request when
6:41
subman uploads image file they will make
6:44
this post request so if I don't make
6:47
this and submit a file click on upload
6:51
you will see this you will get this
6:53
error that cannot post /upload so now we
6:56
just need to define this post request
6:59
/upload so now in the express app now we
7:03
just need to define
7:05
this post request so we will simply make
7:09
app dot post and
7:13
slashupload
7:15
and this will be again a request request
7:18
response so right here we now need to
7:20
initialize the library which will be
7:23
able for file upload as we already
7:28
imported this library malter and now we
7:30
just need to configure some settings so
7:33
we will declare this object of storage
7:36
and this malter library it
7:39
contains a method by which you can store
7:42
files on the server so one such method
7:45
is this one which is disk
7:48
storage and here you actually provide
7:51
the destination where you need to
7:55
store request file call back so this
7:58
will be a simple function where you
8:00
exactly tell where you need to store so
8:05
we'll be storing all the files in the
8:07
uploads directory so we provided this
8:09
inside the
8:11
destination and the second property here
8:13
is will be the file
8:16
name so this will be the file name right
8:19
here
8:24
so so we simply give a random file name
8:28
using the date constructor date dot
8:32
now and then it will embed this
8:35
dash and then it will get the original
8:38
name of the file so here we are
8:40
constructing the random file name which
8:42
will be given to the file which it is
8:44
uploaded
8:46
so after doing this now you can
8:49
instantiate a
8:54
new you can call malter constructor and
8:57
here you can pass the storage that we
9:00
have
9:02
defined this object of storage so in
9:06
this easy way you can define the malt
9:08
package you first first of all import
9:11
the package then you actually
9:13
instantiate the storage then you
9:16
initialize the upload so after you do
9:19
this now in the post request you can
9:21
simply pass
9:23
this
9:25
middleware so in between this we can
9:28
simply say
9:29
upload so here we are only uploading a
9:32
single file to the server so we have
9:34
this function of single so then we need
9:36
to give the file the name attribute that
9:39
we defined in the HTML file right here
9:41
you'll see in the input attribute so we
9:45
have given this name attribute which is
9:46
file so you just need to pass the same
9:49
name
9:50
attribute right here so we simply say
9:55
file so once the file is uploaded you
9:59
can give it a notification
10:02
message you can simply say your file is
10:05
successfully
10:10
uploaded so that's the basic setup of a
10:14
file uploads inside Malter so if I
10:16
restart the
10:20
application so again go to
10:24
the application localhost 3000 you will
10:27
see the form will be there if you select
10:30
the image file click on upload you will
10:33
see your file will be uploaded and if
10:36
you check the uploads directory your
10:39
file is present in the uploads directory
10:41
so in this easy way you can upload
10:44
files let me upload another file
10:51
so same thing you will get the message
10:54
and the second file will be uploaded so
10:56
in this easy way you can actually upload
11:00
files to a NodeJS express server using
11:03
Malter
11:05
library the process is very simple so
11:09
thank you very much for watching this
11:12
video and I will be seeing you in the
11:14
next one