Up next in 10
Build a Deno Google Drive Clone File Manager Web App to Upload & Display Files in Browser Using TS
Jun 7, 2025
Get the full source code of the application here:
Official Website:
https://freemediatools.com
Show More Show Less View Video Transcript
0:02
uh hello guys welcome to this video so
0:04
in this video I will show you how to
0:06
build out a complete Google Drive clone
0:10
mini Google Drive clone where you can
0:11
upload files and view the files right in
0:14
the browser itself and for this we'll be
0:16
using a framework which is very popular
0:20
a alternative to NodeJS which is Dino
0:23
dino is a runtime environment similar to
0:25
NodeJS and uh we'll building this Google
0:29
Drive application so let me show you the
0:31
demo of the application the demo looks
0:33
something like this it is a file upload
0:35
kind of an application where you have
0:37
the option to choose a file or you can
0:40
drag and drop a file and you can even
0:42
put the filteration as well only the
0:45
maximum file size should be 10 MB so I
0:48
will show you all these features that
0:50
you can integrate this similar to Google
0:52
drive and there is this upload file
0:55
button as well so all the files which
0:58
will be uploaded will be stored inside
1:00
the uploads directory i created this
1:02
uploads directory right in the server
1:05
right here so currently this directory
1:07
is is empty so now as I upload the files
1:11
here you will see there is an option
1:13
here choose file button so as I choose
1:16
this file
1:17
here and you can choose any file so
1:21
specifically I'm looking for uploading
1:24
images so it will display the
1:26
information as you select the file here
1:28
it will say the selected file name what
1:31
is the size of it what is the extension
1:33
and then there is a button of upload
1:35
file so as I click the upload button you
1:37
will see you will get a notification
1:38
that the upload is successful and then
1:41
this is a file name it also gives you
1:43
the download URL so if you click the
1:46
download button the file will open and
1:48
then you can download this image so this
1:50
will be the full URL of the server
1:52
localhost 8000
1:54
upload/ so as you can see the file is
1:57
uploaded in the uploads directory as
1:59
well as you can see so it's a complete
2:02
application and now if you want to view
2:04
this file here view all the files it
2:06
will display the list of uploaded files
2:10
in a Tableau structure and we have three
2:13
columns file name this is actually a
2:15
file name size what is the upload date
2:18
if you click on this the image will open
2:21
it will display and now if you want to
2:23
upload more files you can upload
2:27
it you can see that click and now you
2:31
can see two images are there so now you
2:33
can see two images so it's a fully kind
2:35
of a Google Drive clone web application
2:38
which works entirely in the browser
2:41
so if you want to upload new file you
2:44
simply go to this upload this and now
2:48
there are three
2:50
files so all the source code guys is
2:52
given in the description of this video
2:54
if you want to get the source code of
2:56
this project I will also show you how I
2:58
code this step by step so you can see
3:02
now there are four files available you
3:04
can see automatically all the files will
3:06
be stored so now to get started here you
3:09
first of all need to install this
3:10
framework which is Dino Denojs the next
3:14
generation JavaScript runtime it's
3:16
similar to NodeJS and uh this is their
3:20
official website dino.com so now first
3:24
of all you need to install this for
3:26
installing it you need to go to your
3:30
PowerShell and uh just execute a command
3:35
i'm assuming that you have installed
3:36
Dino while you are watching this video
3:39
but still if you haven't I will show
3:43
you so if you just type on chat GPT how
3:47
to install Dino so I'm just taking
3:50
shortcut so there are two options uh you
3:54
can go to if you're on Windows machine
3:56
you can open
3:58
PowerShell and then it gives you this
4:01
command here i already have the latest
4:03
version so this gives you this command
4:08
so just open this PowerShell as
4:10
administrator and execute this command
4:13
so just pause the video and write this
4:15
command i am on Windows so simply
4:18
execute this i already have Dino
4:21
installed so you will
4:22
see if you if I just write Dino- version
4:26
so it will tell me I'm using the latest
4:28
version of Dino which is
4:30
2.3.5 and with TypeScript so essentially
4:34
in Dino we use Typescript not JavaScript
4:38
so now let me show you step by step and
4:40
uh this is the overall
4:43
project so the source code is given in
4:45
the description so just define a
4:47
server.ts file so this will be the main
4:49
file of the project
4:52
server.ts so you can see this is the
4:55
complete project here I will guide you
4:57
show you the important pieces of this
5:00
code so almost 598 lines of code is
5:04
there
5:06
so first of all to get started right
5:09
here you will import the basic modules
5:13
from Dino import serve which will be
5:16
coming from
5:17
https
5:20
dino.land/
5:23
st so this is basically the HTTP server
5:27
that you are importing and there's
5:29
actually a serve method which is
5:32
available in Dino basically whenever you
5:35
run the Dino app then only it downloads
5:37
all the packages so first of all you
5:40
write the application and then
5:41
automatically downloads the necessary
5:44
packages so that's why it's more
5:46
effective as compared to
5:49
NodeJS so similarly first of all let me
5:53
import all the packages that is needed
5:55
for this application the serve method
5:57
serve file in show directory so all
6:00
these are coming from the basic denino
6:04
packages and then here you will define
6:06
your port number on which your
6:08
application will run so 8,000 port
6:10
number and then here you will define
6:13
your upload directory
6:16
so here you just need to create a
6:18
directory here in the root directory
6:20
where all your files will be stored so
6:22
just create uploads directory the name
6:25
can be anything and then we will
6:28
basically call this function in show
6:31
directory which is part of the dino
6:33
framework it will create this
6:37
directory so if the directory doesn't
6:40
exist it will automatically create this
6:42
directory so you don't need to create
6:44
the directory and then here we will call
6:47
the basic function here which is the
6:49
handler
6:53
function which will take the
6:56
request the syntax might be a little bit
6:59
different if you are coding in dino for
7:01
the very first time it's little bit
7:03
complicated because it's
7:05
TypeScript and then here you
7:08
will open this URL request dot URL and
7:13
you'll get the path
7:16
URL.path
7:20
name and here you will simply serve the
7:23
HTML form in this if condition we are
7:25
simply checking that if this is a home
7:28
route request or if it's a index html so
7:31
here you just need to provide your HTML
7:34
form get HTML form we are calling this
7:36
method so we now need to define this
7:40
method so at last we also need to start
7:43
this application as well for starting
7:45
this dino application
7:47
you will basically call this function
7:50
which is the serve function and here you
7:55
pass this handler function and just pass
7:58
the port
8:01
number which is set to the port so this
8:05
will start your dino application like
8:09
this and now to run this application
8:12
it's very important for running this
8:14
application first of all we need to
8:15
define a file in the root directory
8:18
which is denino.json so this will be the
8:20
configuration file of your dino app so
8:22
here I have also given this code in the
8:25
full code which is given in the
8:27
description so just put
8:29
this scripts start and the dev script so
8:33
you simply run this by dino task and
8:37
then name of the task which is dev
8:42
so it will basically watch the script if
8:45
you make any sort of changes it will
8:46
automatically restart so this is the
8:48
development script this is a start
8:50
script so if I just write here dino
8:56
taskdev so for running this guys you
8:59
need to open your command line
9:02
so just open your command line right
9:06
here just write dino task dev
9:10
so first of all it will install all the
9:12
modules and we granted all the
9:15
permissions right here if you see and
9:17
then now it is listening on port 8,000
9:21
if you try to open this you will see in
9:24
this easy way you can run this
9:25
application as well so localhost
9:28
8,000 so now we just need to provide
9:31
this HTML form here because we are
9:33
running this on local host
9:37
so
9:39
here we now need to define this function
9:42
which is get HTML form so this function
9:45
will be responsible for showing the HTML
9:51
form so right here you can define this
9:54
function which is function get HTML form
10:03
so right here you basically have your
10:06
simplest of
10:16
forms so this is a fairly big project
10:18
guys so what I will do uh the link is
10:21
given in the
10:23
description let me just explain you what
10:25
is happening so right inside this form
10:27
here get HTML form if you
10:31
see here we are returning the full form
10:34
right here we applied some CSS right
10:36
here which is not important to the
10:38
project so just make sure that you have
10:40
this form here where you can drag and
10:42
drop and choose your files and this is
10:45
your HTML and also we have written some
10:48
JavaScript as well which is responsible
10:50
which happens on the client side and
10:52
before uploading process take place so
10:55
this is all the JavaScript which is
10:57
there which is not important and uh if
11:00
you see now the this form will show file
11:05
upload form so as soon as you choose the
11:07
file here the information related to the
11:10
file will show this is all happening due
11:12
to the JavaScript that I written for the
11:14
project and as soon as you click the
11:16
upload file button the upload will be
11:18
successful and then this information
11:20
will be shown and then you can view all
11:23
the files in the Tableau structure so
11:25
you will see a file is uploaded you can
11:27
see the file is uploaded so it's a fully
11:30
flashed dino file upload Google drive
11:32
clone kind of an application and please
11:35
hit that like button guys subscribe the
11:37
channel for more videos like this so
11:40
this is the overall script here you will
11:42
see that inside our get files list we
11:46
are showing the all the files in a
11:48
tabular structure we have three columns
11:51
first of all the file name then we have
11:53
the size the date of the modification of
11:55
the file this is all the HTML you can
11:59
even split this code into multiple files
12:01
as well so once you get the code guys
12:03
you can do the modification by yourself
12:05
the link is given in the description as
12:07
you can see right here inside Dino code
12:09
right here we have this upload request
12:12
so once the user clicks the upload file
12:14
button this uh request will happen which
12:17
is /upload this is a post request as you
12:20
can see
12:22
and right here we are getting the form
12:24
data we are passing the form data we are
12:26
creating a new constructor new object of
12:28
form
12:29
data and then we are getting the actual
12:32
file here by form data.get file and here
12:36
they we are comparing that if the file
12:38
is not there then we simply return the
12:40
message no file uploaded and then we are
12:43
setting the maximum size of the file
12:45
which is 10 MB so if you try to upload a
12:48
file which is greater than 10 mgabytes
12:50
then it will give you a
12:56
error so
12:59
so if you try to upload a
13:02
video you can see the size of this video
13:05
is greater than 10
13:07
mgabytes then it will give you this
13:10
progress bar but it the file will not
13:12
get uploaded because it is greater than
13:14
10 megaby so it also have the progress
13:16
bar if you have a larger file like this
13:20
so now you can see the file hasn't
13:22
uploaded because it was greater than 10
13:24
mgabytes then basically we put the file
13:27
name which is random file name we use
13:29
the date dotn now constructor we give
13:31
the file name plus the extension and
13:33
then we upload this by using the write
13:36
file method dino.right write file and
13:39
then the file is uploaded and then we
13:42
simply send out the response that your
13:44
file is uploaded and uh if I hit this
13:47
route here which is view all files after
13:51
we there is this second route as
13:57
well can see that so if I
14:01
upload there is
14:03
this view uploaded files route so then
14:07
as soon as you hit this it will show you
14:09
all the files which are there this route
14:12
is basically
14:14
/uploads and this will list out all the
14:17
uploaded files this is a route for that
14:19
and here we are simply looping through
14:20
all the files which are there in this
14:22
directory which is uploads directory how
14:25
many files so we are simply putting a
14:26
for loop and then we are looping through
14:30
and showing these files this is a full
14:33
application guys if you're interested
14:34
the link is given in the description
14:37
full Google Drive clone application
14:38
thank you very much for watching this
14:40
video and also check out my website free
14:44
media tools.com uh which contains
14:47
unlimited number of tools regarding
14:48
audio video and image and I will be
14:51
seeing you guys in the next live stream
#Programming
#Software
#Web Services
#File Sharing & Hosting