Up next in 10
Node.js Koa.js Project to Upload Files to Server Using HTML Form in Browser
0 views
Jun 7, 2025
Get the full source code of the application here: Official Website: https://freemediatools.com
View Video Transcript
0:02
uh hello guys uh welcome to this uh live
0:04
stream so in this live stream we will
0:06
talk about a new framework of NodeJS
0:09
which is called as COAJS it's an
0:12
alternative to ExpressJS to actually
0:15
upload files to server so as express is
0:19
the number one framework if you see
0:21
ExpressJS of NodeJS for bidding web
0:24
application so there is an alternative
0:26
framework that you can use which is
0:27
called as COAJS which is a next
0:30
generation web application framework for
0:33
NodeJS so we will look at a very simple
0:35
example on how to upload files using a
0:38
simple HTML form so let me show you the
0:41
example that we will be building so if I
0:44
open
0:46
here so there will be this simple HTML
0:49
form right here where the user can
0:51
select any file that they want to upload
0:54
so then we have the upload button and
0:57
here we are actually storing all the
1:00
uploaded files in the uploads directory
1:02
currently the directory is empty so now
1:05
if I try to upload a file if I select a
1:08
file and then let's suppose
1:14
I select a file here you will see the
1:18
JPG file has been selected and then as I
1:21
select click the upload button you will
1:23
see the file will get uploaded and you
1:25
will get a notification that your file
1:26
has been successfully
1:28
uploaded and uh if I show you actually
1:31
the folder here you will see the actual
1:33
image file will be received here in the
1:35
uploads directory and similarly we can
1:38
repeat this process and if you try to
1:40
upload one another file
1:42
here again if you select the file click
1:45
upload and you will see you will be
1:48
receiving this file here all the
1:49
uploaded files in the
1:51
folder so this is a complete example so
1:54
for building this application in Kovjs
1:57
you need to install some packages so
2:00
just go to npmjs.com and the very first
2:03
framework you need to install the
2:06
package is kova as I already told you
2:09
it's a new framework alternative to
2:11
express command is simple npmi kova and
2:15
it's almost got 3 million weekly
2:18
downloads apart from that you also can
2:20
install this package kova static which
2:23
is actually a middleware of kovaj js if
2:26
you want to serve static files so the
2:29
command and is simple npmi kova static
2:32
and one other package is required for
2:35
uploading files in kovjs which is kova
2:39
body which is also a
2:44
middleware so if you just search here
2:46
you will find out this is actually the
2:48
package that I am talking about it's uh
2:50
helpful for uploading files so these
2:53
three packages are required for this
2:55
application simply install this and I
2:58
will start it from scratch patch let me
3:00
delete
3:05
everything and the very first thing
3:07
we'll do just create a index.js file and
3:09
also create a uploads directory where
3:11
you will be storing all your uploaded
3:13
files and now just come to index.js file
3:16
and right here we will be initializing
3:19
our Kovjs application so let me
3:24
just explain you by writing this code
3:27
step by step so first of all you need to
3:30
require the necessary packages so you
3:32
require the kova package like this and
3:36
then we also need to require the kova
3:38
body package as well so we just need to
3:41
require
3:42
it so just say default and similarly we
3:46
also need to require
3:48
the ka static middleware as well so
3:52
these three packages we installed we are
3:53
requiring it apart from that we also
3:56
need the built-in path module as well
3:59
and then we'll be initializing a very
4:01
simple application like
4:07
this so we are instantiating a new
4:10
constructor of this we in imported this
4:13
and then we are initializing a new app
4:16
and then right here whenever you
4:18
initialize this app you can use some
4:23
middleares so app dot use and we can use
4:27
this middleware which is kova static so
4:31
we imported this so here we are passing
4:33
it as a middleware and
4:35
here just you need to specify where your
4:38
static files will be stored so my all
4:40
the static files will be stored in the
4:42
public directory so right here just
4:45
create a public directory where you will
4:47
be all be storing your public assets so
4:50
this will be a simp simple index html
4:53
file which will be a simple form which
4:56
will be shown to the user so in this
4:58
easy way you can do
5:01
this now to start the application it's
5:03
very simple we simply say app.listen
5:06
similarly we do this in express also the
5:09
listen function is there you specify the
5:11
port number and then your application
5:13
will start so we simply write console
5:15
log that is server listening on port
5:20
5,000 so now we just need to specify
5:25
this form here so inside the form we
5:28
will have a simple form where the user
5:31
will be allowed to provide a action
5:34
right here so we will simply make a post
5:38
request encoding type multiart form data
5:42
so these are the three attributes so
5:44
we'll be making a post request to the
5:47
/upload route so right in this form we
5:50
will be having a input field where the
5:54
user will be allowed to select a
5:58
file and giving a name attribute as well
6:01
name is equal to file and then we will
6:03
have a simple
6:05
button of
6:08
upload so now what happens if I run this
6:11
application if I navigate to localhost
6:13
5000 you will actually see this form
6:15
will be
6:16
seen you can see now the form is seeing
6:19
right here so if I select a file here
6:22
click on upload you will see this error
6:25
this post request we need to make this
6:27
post request /upload so now we just need
6:30
to go to index.js right here we just
6:33
need to make this post
6:36
request but before that we can pass the
6:40
middleware which is the kova body
6:42
middleware as well we can initialize it
6:45
and pass some options first of all the
6:48
multiart option which is true second
6:50
option is the
6:52
formidable and here we are using an
6:54
object so here it takes an option upload
6:58
directory so here you need to specify in
7:00
which directory you will be storing all
7:02
the uploaded files so here we are
7:04
mentioning we have created this uploads
7:07
directory so as you can see we have
7:10
created this uploads directory so we are
7:12
mentioning the full path here and
7:14
passing it in the upload directory the
7:16
second option it takes is the option to
7:19
keep extensions so I will say
7:23
true so that's all that we need to do
7:25
and then we can initialize the request
7:29
post request so app dot
7:32
use async
7:35
context so right here using this context
7:39
object which is passed right here we can
7:41
actually check if this request is a get
7:44
and a post so if in triple equal to if
7:47
it's a post
7:49
request and also the path here we need
7:52
to check the path as well which is
7:56
/upload so if it both these conditions
7:59
are met then it's a post request to
8:01
/upload so now we just need to upload
8:03
the file here so first of all we need to
8:06
get access to the file so for accessing
8:08
the file we use the context object and
8:10
we see context request files question
8:14
mark file so this needs to be the same
8:16
name attribute that you have specified
8:18
in the HTML form that is you can see we
8:21
have given a name attribute so this
8:23
needs to be the same so after you do
8:26
this after you get access to the file
8:28
now we can simply upload the
8:30
file by context body and we
8:35
can
8:37
simply return out a message that your
8:39
file has been successfully
8:42
uploaded so that's all that we need to
8:44
do inside this Kova application if I try
8:47
to
8:48
refresh and again repeat this process
8:50
select a
8:51
file click on upload and you now you
8:54
will see you will get this notification
8:56
message that your file is successfully
8:58
uploaded and if I check right here in
9:00
the folder the file is received in the
9:03
folder so in this easy way you can
9:06
upload files in Kov JS very
9:11
simply so this will be the second file
9:14
which will be received so I've shown you
9:16
step-by-step process using these three
9:19
packages first of all the basic COA
9:21
package to initialize the web server
9:24
Kova body for file upload and Kova
9:27
static for serving static files and uh
9:31
just follow the entire
9:33
tutorial so this is a great alternative
9:36
to ExpressJS if you don't want to ex use
9:39
express you can use
9:40
Kovajs and also please hit that like
9:43
button subscribe the channel and also
9:45
check out my website freemediattools.com
9:49
uh which contains unlimited tools
9:51
regarding audio video and image and I
9:54
will be seeing you in the next video