Up next in 10
Build a Bun.js File Upload to Server Using HTML Form in Browser Using TypeScript Web App
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 welcome to this live
0:04
stream so in this live stream I'll show
0:06
you a new uh framework in uh the
0:10
programming world which is bunjs uh
0:12
which is a alternative to NodeJS it's a
0:15
runtime environment and I will show you
0:17
a complete file upload project in this
0:19
framework so if you just type here on
0:22
Google which is bunjs you will actually
0:25
see this
0:29
framework let me just
0:31
close just type here bunjs this is the
0:36
JavaScript runtime environment similar
0:38
to NodeJS this is their official
0:42
website and uh you can install this on
0:46
Windows either by opening
0:49
PowerShell so they have given this
0:51
command or you can simply install it by
0:53
npm as well so go to the terminal and
0:56
just install it globally just type this
0:59
command
1:00
npmi-g and write bun so this is actually
1:04
the command this will install bun
1:06
globally inside your terminal and uh it
1:10
basically works in Typescript so we have
1:12
basically built this application which
1:14
runs in port number 3000 which actually
1:17
uploads your files in the server using
1:19
an HTML form so this is actually the
1:21
directory structure we have the uploads
1:23
directory which is currently empty so
1:26
here all the uploaded files will get
1:28
stored so our application is running on
1:30
localhost 3000 so if I try to open
1:34
this so first of all you just need to
1:37
run this project so for running this
1:39
project it will
1:43
be simply the command
1:46
here so you just write bun run and after
1:49
that the file name so I call this as
1:52
server.ts just run this and now your
1:55
application will start at localhost 3000
1:59
this is a simple form here where the
2:02
user can upload files and we basically
2:05
choose the file here and here you just
2:08
need to
2:09
go and select a file here you can see we
2:12
have selected a file and then click
2:14
upload as soon as you upload the file
2:16
you'll get this message that your file
2:18
is uploaded and it has given a random
2:20
name and if you check your uploads
2:22
directory you will see the file is
2:24
successfully uploaded and we can repeat
2:27
this process here and let's suppose if I
2:29
select a different file
2:31
here you will see the same process will
2:34
repeat and a new file is automatically
2:36
inserted so now to get started here so I
2:40
will delete everything so first of all
2:44
just create a simple file server.ts file
2:48
in the root directory
2:51
and now just in basically write this
2:54
code so we need to import the necessary
2:56
packages so first of all we need to
2:58
import the serve method which will be
3:01
coming from this package and then we
3:04
also need to import make directory
3:08
sync and write
3:10
file sync this will also be coming from
3:14
the base package which will file system
3:16
and then we also need to import the join
3:19
which will be coming from path so these
3:21
two fun uh modules are built-in modules
3:24
and this is actually the bun module that
3:27
we installed early on and now first of
3:30
all we need to create a directory
3:31
automatically if the directory doesn't
3:34
exist we need to use this function make
3:36
directory sync to create this uploads
3:38
directory where all the uploaded files
3:40
will be stored and then recursive option
3:43
we can pass true
3:45
so then we can start this application by
3:48
calling this serve method and here it
3:51
takes the port number on which you need
3:53
to actually serve your applications so I
3:55
will simply write the port number to be
3:57
3,00 and then we actually write a
4:01
function which will be responsible for
4:03
all the request which will be coming
4:04
from the buns server so inside this
4:08
function you will write all the request
4:11
so first of all we will catch the
4:14
URL like this new URL and then the
4:18
request URL so whatever is the URL
4:20
coming here we'll compare right here if
4:23
the URL path name is equal to the home
4:26
request if it's a home request then we
4:28
need to show a simple form to the user
4:32
so in this way we can show a form here
4:34
we can return the response like this and
4:38
then bun dot so we imported this package
4:42
which is bun so
4:44
bul and it contains this
4:48
uh file and here you can pass the file
4:52
which is stored in the public directory
4:54
index html so now you just need to
4:57
create a public directory and inside
5:00
that public directory your index html
5:03
file which will be a simple
5:05
form
5:07
so this will be a
5:11
simple form so here it contains a form
5:15
tag input type
5:18
file and give it a name attribute here
5:21
file after that we will have a button
5:23
here of upload so when the user clicks
5:26
the upload button the file will be
5:28
uploaded so button type will be submit
5:30
and here you just need to attach three
5:32
attributes here the action attribute
5:34
which will redirect the user when you
5:37
click the upload button it will make a
5:39
post request to this route here
5:41
/upload the method will be a post here
5:44
and encoding type will be multiart form
5:46
data so these are the three attributes
5:48
here that we pass here and after that
5:51
here you just need to if you refresh
5:54
your application just run this
5:56
application on the
5:58
terminal with this command bun run
6:01
server.ts TS and if you check in the
6:03
browser just open localhost 3000 you
6:06
will see the form will show this is your
6:08
HTML form which is showing right here
6:10
you have the choose file button and if
6:12
you select a file image file and click
6:15
the upload button you will see this
6:18
error will be there because you haven't
6:24
uh created this uh post post request so
6:29
we are submitting we are making a post
6:31
request to this route so now we just
6:32
need to make this post request in this
6:34
route in the buns server side code so
6:38
right here we just need to handle the
6:41
file upload so we will compare this if
6:44
the URL is equal to
6:47
/upload and also we will check right
6:50
here if the method
6:53
is
6:56
post if all these two conditions are
6:58
true then we will upload the files so in
7:00
this way you can check in buns and now
7:03
for file upload it's very easy we will
7:05
make a new object of form data so you
7:09
will say request dot form
7:12
data and then we will get access to the
7:15
file form
7:16
data.get and here you just need to pass
7:19
the name attribute that you passed in
7:22
the HTML file so whatever is the name
7:24
attribute that you have given right here
7:25
this needs to be the same right here so
7:28
these two things need to be same after
7:30
you get access to the file you can
7:32
easily upload this so file instance of
7:36
file and here we first of all convert
7:39
this file to array buffer for converting
7:41
this file to array buffer we simply call
7:43
the function array buffer we convert
7:46
this to array buffer and then from array
7:48
buffer we will convert this into a
7:52
buffer so we can use the buffer class
7:55
and it contains this function from and
7:57
here we can pass this array buffer and
8:00
then we can upload this to the actual
8:02
path by using the join function so here
8:05
we need to upload this file to the
8:06
uploads directory and whatever is the
8:09
file name after that we call this
8:11
function write file sync we upload this
8:14
to the file path whatever is the buffer
8:17
and then we return the response back to
8:19
the client that your file is uploaded so
8:21
we simply say that file uploaded and
8:24
then we simply print the name of the
8:27
file as well so that's all that we need
8:29
to do and uh after that you can check
8:33
your
8:35
browser just if you make the changes
8:38
just restart the application and as soon
8:41
as you do this just go to localhost 3000
8:45
try to upload a
8:48
file select the file click upload and
8:51
you will get this message that your file
8:53
is uploaded and it has if you check the
8:55
uploads folder you will see the file is
8:58
successfully
9:00
there and if you repeat this
9:04
process select a different file here
9:07
click upload you will see again the file
9:09
will get uploaded so this is a very
9:13
basic project of file upload how to do
9:15
in buns i showed you from scratch so
9:18
bunjs is very much a NodeJS alternative
9:23
and uh if you ever want to try other
9:26
frameworks bunches is one of them so
9:28
it's quite easy you can see it works
9:30
with Typescript not JavaScript you
9:32
create the server file and the nice
9:35
thing about Bunge is that you need not
9:37
have to install much third party
9:39
packages as compared to NodeJS it works
9:42
with uh less packages it is very
9:45
lightweight as compared to NodeJS and
9:49
you can decide and also check out my
9:52
website which is freemediatools.com
9:55
uh which contains unlimited tools
9:57
regarding audio video and image and I
10:00
will be seeing you in the next