Up next in 10
Node Express to Upload Files to Server Using HTML Form Using express-fileupload Library in Browser
555 views
Jun 7, 2025
Get the full source code of the application here: Official Website: https://freemediatools.com
View Video Transcript
0:04
uh hello guys uh welcome to this video
0:06
so in this video I will show you a
0:08
NodeJS uh express project which will
0:11
allow us to upload files directly to
0:14
server using an HTML form uh using a
0:18
library called as express file upload
0:21
express file upload is a uh simple
0:24
middleware library specifically designed
0:27
for express web applications if you want
0:30
to upload directly inside uh upload
0:33
files to the server so right here I will
0:36
show you a very simple example where we
0:38
have created this uploads folder where
0:41
all the uploaded files will get uploaded
0:43
right in this folder and we have this
0:45
index html file so I'm just running this
0:49
application on localhost 3000 this is
0:51
actually a web application if I open
0:54
this you will see this application looks
0:56
like this
1:01
and you can see it is running on
1:04
localhost
1:10
3000 and we also have the choose file
1:12
button and then we have the upload
1:14
button so as soon as I click the choose
1:17
file button you will actually
1:19
see you will be redirected to actually
1:24
select a particular file so if I simply
1:26
select choose file and here you can go
1:30
to your
1:32
directory and just choose a image file
1:35
so we have selected a JPG file so as
1:37
soon as I click the upload button you
1:40
will see it is saying that G is not
1:52
defined sorry let me just rectify this
1:55
mistakes just fix this again execute
1:58
this application so just select your
2:01
file after selecting the file simply
2:03
click upload and you will now get a
2:05
notification that your file is uploaded
2:08
successfully and uh now if you see your
2:12
file is received in this folder in this
2:14
uploads
2:15
folder so you can see this is a very
2:18
simple setup for file uploads in NodeJS
2:21
Express if I select a different file
2:23
again click the upload button again the
2:26
file is uploaded and you will get this
2:28
image file right in the directory so the
2:32
let me show you the library so you need
2:35
this package first of all express
2:37
package for building the web server
2:40
simply execute this command and secondly
2:43
you also need this package which is
2:45
express file upload this is designed
2:48
specifically for express applications
2:50
it's it's act actually is a middleware
2:53
for uploading files express middleware
2:55
for uploading files so the command is
2:58
simple you just execute this command to
3:00
install this module it's almost got
3:02
384,000 weekly downloads so now to get
3:06
started it's very simple so what I will
3:09
do I will simply delete
3:14
everything so just create a simple
3:16
NodeJS express project install these two
3:19
packages and then you just need to
3:20
create a directory where all your files
3:23
will be stored so we created this
3:24
uploads directory and after that let me
3:27
just delete everything and start from
3:29
scratch so the very first thing you need
3:32
to do you need to require all the
3:34
necessary packages so what I will do I
3:37
will require the express
3:41
package we also need to require the file
3:44
upload package
3:48
so we just need to require it so express
3:50
file
3:51
upload and then we also need the path
3:54
module which is a built-in module of
3:57
NodeJS and then we'll construct a simple
4:00
express application which will run on
4:03
5,000 port number and inside the
4:05
callback function this app will be
4:08
listening on port
4:13
5,000 so now in this simple web
4:16
application we will simply make a get
4:18
request so when someone goes to the home
4:20
route we will load this HTML file so we
4:24
will simply say use the send file
4:26
function and we will simply show this
4:29
index.html file which will be present in
4:31
the same directory so now right here
4:34
just create a simple index html
4:37
file so this will be a simple HTML form
4:40
which will be shown to the user so now
4:42
inside this HTML form we will have the
4:44
form tag and the method will be post and
4:48
encoding type multiart form data so
4:50
whenever we are working with files we
4:52
need to give this attribute encoding
4:54
type multiart form data and right here
4:57
we just need to have this input field
5:00
where the user will select the file and
5:02
we also need to give it a name parameter
5:04
as well which is file and then we will
5:07
have a simple button which will be
5:10
useful for uploading the
5:13
files so we will
5:16
simply button type submit so now just
5:20
execute this application if you go to
5:22
localhost 5,000 you will see this form
5:26
appearing and at this moment of time if
5:29
you select the image file click the
5:31
upload button you will get this error
5:33
that this post request hasn't been
5:36
defined so what we need to do we need to
5:38
go to this uh HTML form and just add
5:42
this attribute of action action
5:44
attribute exactly tells the HTML form
5:47
where to redirect whenever you click the
5:50
upload button so right here you'll be
5:53
redirecting the user to /upload this
5:55
will be the post request we need to make
5:58
right in the backend server so right
6:00
here simply make this post request
6:03
/upload and right inside this request we
6:06
will be writing the code for uploading
6:07
the file so now for uploading the file
6:10
inside this first of all we will check
6:13
that if the user
6:15
has selected some files or not if they
6:19
haven't if either of
6:22
these conditions evaluates to true then
6:25
we will simply return a error message of
6:28
status
6:30
400 and we will just return an error
6:33
message that no file uploaded
6:36
so right in this if condition we are
6:38
checking that if the files or if the
6:40
files are not defined then in either of
6:42
these cases we will say no file uploaded
6:45
but if the files have been selected by
6:47
the user then we will actually get read
6:50
the files for reading the files we will
6:52
simply say request files dot file and
6:55
then we will
6:58
actually provide the path where we need
7:01
to upload these files so we have created
7:04
this
7:06
directory which is the uploads directory
7:09
so here we are mentioning this directory
7:11
and then the actual file name so we can
7:13
access the file name using
7:15
file.name so you can see
7:18
that so after so basically if you want
7:23
to use this file.name you need to
7:26
include this middleware so we already
7:28
imported this library you can see at the
7:30
top so now to pass it as a middleware we
7:34
use this line which is app dot use and
7:38
here we pass the middleware which is
7:40
file upload so just you need to it is
7:43
mandatory that you pass this middleware
7:46
to the express application so we pass
7:48
this middleware like this app dot use
7:50
followed by the file upload middleware
7:53
so we are including this at the top and
7:55
then passing it as a middleware and now
7:57
you can safely use these uh the file of
8:00
the name it will be accessible right
8:03
here after you do this now we it has a
8:06
function which is file dot move it has
8:10
all these functions it will move the
8:12
file to this location upload path and if
8:15
any sort of error take place we can
8:17
simply return a error
8:20
message of status 500 that
8:29
error occurred during
8:31
upload if no error take place then we
8:34
can simply return a simple notification
8:36
message to the user response that your
8:40
file
8:42
uploaded
8:44
successfully now that's all the code
8:46
which is required for this application
8:48
it's very easy to configure this module
8:50
first of all you require this module by
8:52
the required statement then you pass it
8:54
as a middleware by using app dot use
8:56
file upload and inside the post request
8:59
you simply use this move function mv
9:02
function which actually moves your files
9:05
directly to the path that you specify so
9:08
if I try to execute this application now
9:11
choose a file click on the upload button
9:14
you will get this notification that your
9:16
file is uploaded successfully and you
9:19
will see your file is appearing in the
9:20
uploads directory if I execute for the
9:23
second
9:25
time let me select a second file here
9:28
click upload you will see this second
9:31
file will also appear so in this easy
9:33
way you can use this package inside
9:35
NodeJS Express it's a very good
9:37
middleware library express file upload
9:40
the configuration process is uh quite
9:43
simple i've shown you step by step and
9:46
thank you very much guys for watching
9:47
this video please hit that like button
9:49
subscribe this channel for more videos
9:51
like this and also check out my website
9:54
guys freemediattools.com
9:56
uh which contains thousands of tools
9:59
related to audio video and image and I
10:02
will be seeing you guys in the next
10:04
video
#File Sharing & Hosting
#Programming