Up next in 10
Build a Node.js Restify Framework Tutorial to Upload Files to the 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:03
uh hello guys welcome to this live
0:05
stream So in this live stream I will
0:06
show you a new NodeJS framework which is
0:09
called as
0:10
restify It's a very minimalistic uh
0:13
framework for building web applications
0:16
and can be a great alternative to
0:18
frameworks such as ExpressJS
0:21
NestJS So this is their official website
0:24
restify.com the name of the framework If
0:27
you just write restify on Google the
0:29
very first website which comes this is
0:31
actually their web service framework you
0:35
can build very good applications using
0:37
this framework So I in this video I will
0:39
show you a very basic tutorial on how to
0:42
get started with this framework on how
0:45
to upload files using a simple HTML form
0:48
So as you can see we our application has
0:51
been started and it has been running on
0:53
localhost 3000 So if I just open the
0:56
port number So the application looks
0:59
something like this We have a simple
1:00
HTML form where the user can simply
1:03
select a file and upload and all the
1:07
uploaded files will be residing in this
1:09
folder We have created a uploads folder
1:13
Currently this folder is empty So as
1:15
soon as I select a file here you will
1:18
see let me choose a file
1:24
So as soon as I select the image here
1:26
click upload You will get this response
1:28
back from the rest API that the file is
1:31
uploaded successfully And it also gives
1:33
the name of the file which has assigned
1:36
And you can see the file is successfully
1:38
uploaded in the folder And if I try this
1:41
for the second time here let's suppose I
1:44
want
1:45
to let's suppose I select this file
1:48
again the same process will repeat and
1:50
you will see the file is successfully
1:52
uploaded So now to get started here you
1:55
need to install this module So just go
1:58
to your command line simply create a
2:00
NodeJS project
2:03
npmi and just write
2:06
restify So this is a command here to
2:09
install this I have already installed it
2:12
So your package dojson file will look
2:14
something like this
2:17
you will have this
2:19
restify So it will install the latest
2:21
version And now I will delete everything
2:24
and start from scratch Just create a
2:27
basic index.js file
2:31
and I will
2:33
just write the code from scratch So
2:36
right here you need to import all the
2:38
necessary packages which are required So
2:40
first of all we will be importing the
2:42
restify framework we will require it and
2:46
then we also need the built-in packages
2:49
such as the file system module and the
2:52
path module as well
2:55
So after requiring it now we will start
2:58
a basic server of restify So this is
3:01
very easy We simply say restify and it
3:03
contains this function create server So
3:06
as soon as you can see we imported this
3:08
module at the top and then we are
3:10
creating a HTTP server and right here
3:13
after that we can simply pass this
3:17
middleware server dot
3:19
use But before that let me start this
3:22
HTTP server For starting it we have this
3:25
listen function So we simply say
3:28
server.list and here you provide the
3:30
port number and then inside the callback
3:33
function This is very much similar to
3:39
express So now the application will
3:42
start If you run this application
3:45
nodemon you will see app is running on
3:48
port 5,000 So I just need to bind a
3:51
simple HTTP request right here So we can
3:55
simply create HTTP request simply typing
3:58
server.get and right here we will say
4:01
slash So this will be the home route and
4:04
here we will have the call back function
4:08
and inside this we will return a simple
4:11
message or in this case a simple file
4:15
HTTP file sorry a form where the user
4:19
can
4:21
actually see a form where they can
4:24
upload file So content type will be text
4:27
/ HTML And after that we
4:30
will simply pass this HTML code right
4:35
here And here you can have a simple
4:38
form So this form will be this form
4:41
right here You can see form action And
4:44
we making a simple post request to this
4:47
route/upload encoding type multiart form
4:50
data And after that we have this input
4:52
type file We have given this name
4:54
attribute name is equal to file and then
4:56
we have a simple button of upload So
5:00
that's all that is there And if I try to
5:02
open this application now you will see
5:05
this form will be showing you can see
5:08
localhost 5,000 and this form is showing
5:11
right here So now as soon as I do this
5:15
if I try to upload a file you will see
5:18
it will get this error message that
5:20
/upload doesn't exist you will get this
5:22
error message Now in order to fix this
5:25
we need to make this post request For
5:28
making this post request we simply say
5:31
server.post and
5:33
/upload And then we simply say request
5:37
response next This is a simple HTTP
5:41
request And then we will get access to
5:43
the file here This is really important
5:46
because we given this name attribute
5:48
right here If you see name is equal to
5:50
file So we are simply accessing this
5:52
name attribute right here You can call
5:55
this anything but I'm just calling it
5:56
file So this needs to be the same After
5:59
we get access to the file it's very easy
6:01
to upload the file So we use the path
6:04
module of
6:05
NodeJS We get the current directory and
6:08
there we provide the directory where
6:10
which will be uploading the file So we
6:13
get the file name by using file dot name
6:17
So just create this
6:18
directory I already created this
6:21
directory uploads So let me just delete
6:23
everything from
6:24
here You can call this anything I'm
6:26
calling it
6:28
uploads And then we'll use the file
6:30
system module It contains this write
6:32
file sync function And we'll save this
6:40
file So after that we will send out a
6:42
simple message to the user that your
6:45
file is successfully uploaded We
6:48
simply give it a message property that
6:51
is file
6:52
uploaded
6:54
successfully and then the second
6:56
property we can even return the file
6:58
name as well So file dot name So this
7:01
completes your application If I try to
7:03
test this application now and just go to
7:07
localhost 5,000 you will actually see
7:09
now if I see localhost 5,000 this is
7:12
actually the form If I try to upload a
7:15
file and click upload
7:20
uh there is some kind of error is
7:21
occurred Let me
7:23
see request
7:25
files and this error if you are getting
7:28
this error message I think we forgot to
7:30
include the middleware So just include
7:33
this middleware it's necessary server
7:35
dot
7:36
use and restify it contains this
7:40
middleware this plugins dot body
7:44
parser So this is required while you're
7:46
working with forms So map file to be
7:51
true This line you need to write add
7:54
this
7:55
middleware this body parson middleware
7:58
Now we can easily access the file by the
8:01
name attribute So if you refresh again
8:04
this application now this application
8:06
will perfectly work Select upload and
8:10
now you can see file uploaded
8:11
successfully and you will get your file
8:13
in the uploads directory If I repeat
8:16
this process
8:17
here and
8:19
uh you will see the next file will get
8:22
uploaded So in this easy way you can use
8:25
this minimalistic NodeJS
8:28
uh framework for building web
8:29
applications It's a great alternative to
8:32
express So I showed you the full file
8:35
upload functionality Thank you very much
8:38
for watching this video and please hit
8:40
that like button subscribe the channel
8:42
as well and also check out my website
8:45
free media tools.com
8:47
uh which contains unlimited tools
8:49
regarding audio video and image and I
8:53
will be seeing you in the next stream