HANOI UNIVERSITY OF SCIENCE AND TECHNOLOGY

SCHOOL OF INFORMATION AND COMMUNICATION

TECHNOLOGY
-----oo0oo-----

GRADUATION THESIS
Developing a files and directories sharing system

Student: Student Id: Class: Course:

Nguyễn Nam Anh 20176002 LTU16A K62

Advisor: PhD. Đỗ Quốc Huy

Hanoi, 04 – 2022
 Acknowledgement
First of all, I would like to express my deep gratitude to teacher Dr. Do
Quoc Huy for directly guiding and creating favorable conditions for me during
the graduation thesis.

I would also like to thank the teachers at Hanoi University of Science and
Technology, especially the teachers of the School of Information and
Communication Technology, who imparted knowledge and experience to me.
The knowledge and experience play an important role in my graduation thesis as
well as will be the strong foundation for me in my future career.
Finally, I would like to thank my family and friends for their help,
encouragement and suggestions so that I can complete this graduation project.

Sincerely !
Table of Contents
ACKNOWLEDGEMENT ................................................................................................................................ 2
I. CHAPTER 1 - GENERAL INTRODUCTION .............................................................................................. 5
1.1. PROBLEM ................................................................................................................................................. 5
1.2. PURPOSE AND SCOPE OF WORK..................................................................................................................... 5
1.3. SOLUTION OVERVIEW ................................................................................................................................. 6
1.4. THESIS STRUCTURE ..................................................................................................................................... 7
1.5. DICTIONARY .............................................................................................................................................. 7
II. CHAPTER 2 – ANALYZING THE SYSTEM ............................................................................................... 7
2.1. CURRENT STATUS SURVEY ............................................................................................................................ 7
2.2. USE CASES OVERVIEW ................................................................................................................................. 7
2.2.1. Operating with file Use cases ........................................................................................................... 9
2.2.2. Operating with directory Use cases ................................................................................................. 9
2.3. USE CASES SPECIFICATION ............................................................................................................................ 9
2.3.1. Guest use cases ..............................................................................................................................10
2.3.1.1. Login...................................................................................................................................................... 10
2.3.1.2. Register ................................................................................................................................................. 11
2.3.1.3. Forgot Password ................................................................................................................................... 12
2.3.2. User use cases ................................................................................................................................13
2.3.2.1. Log out .................................................................................................................................................. 13
2.3.2.2. Search ................................................................................................................................................... 14
2.3.2.3. Update information .............................................................................................................................. 14
2.3.2.4. Use case Change Password................................................................................................................... 16
2.3.2.5. Use case Upload ................................................................................................................................... 17
2.3.2.6. Use case Download............................................................................................................................... 18
2.3.2.7. Use case Preview .................................................................................................................................. 19
2.3.2.8. Use case Set Permission permissions ................................................................................................... 19
2.3.2.9. Use case Share ...................................................................................................................................... 19
2.3.2.10. Use case Delete File .............................................................................................................................. 21
2.3.2.11. Use case Watch List File........................................................................................................................ 21
2.3.2.12. Use case Create .................................................................................................................................... 22
2.3.2.13. Use case Delete .................................................................................................................................... 23
2.4. FLOWS OF SYSTEM ...................................................................................................................................24
2.4.1. Login ...............................................................................................................................................24
2.4.2. Register...........................................................................................................................................24
2.4.3. Forgot password.............................................................................................................................25
2.4.4. Search .............................................................................................................................................25
2.4.5. Change Information .......................................................................................................................25
2.4.6. Change password ...........................................................................................................................26
2.4.7. Upload ............................................................................................................................................26
2.4.8. Download .......................................................................................................................................26
2.4.9. Preview ...........................................................................................................................................27
2.4.10. Set permission ...........................................................................................................................27
2.4.11. Share..........................................................................................................................................28
2.4.12. Delete File ..................................................................................................................................28
2.4.13. Watch List File ...........................................................................................................................29
2.4.14. Create Directory ........................................................................................................................29
2.4.15. Delete Directory .........................................................................................................................29
III. CHAPTER 3 – TECHNOLOGIES ........................................................................................................... 30
3.1. CLIENT-SERVER ARCHITECTURE...................................................................................................................30
3.2. MODEL – VIEW – SERVICE – CONTROLLER (MVSC) DESIGN PATTERN...............................................................30
3.3. POSTGRESQL ..........................................................................................................................................32
3.4. TYPESCRIPT AND NODEJS ..........................................................................................................................33
3.4.1. Typescript .......................................................................................................................................33
 3.4.2. NodeJS ............................................................................................................................................34
3.4.3. Knex JS and Objection JS................................................................................................................34
3.4.4. Express JS........................................................................................................................................34
3.4.5. Axios ...............................................................................................................................................35
3.4.6. Next JS and React JS .......................................................................................................................35
3.4.7. Material UI .....................................................................................................................................36
3.5. DOCKER .................................................................................................................................................36
3.6. NGINX ...................................................................................................................................................37
IV. CHAPTER 4 – DESIGNING THE SYSTEM .............................................................................................. 38
4.1. DATABASE DESIGN....................................................................................................................................38
4.2. CLASS AND PACKAGE DESIGN ......................................................................................................................41
4.3. SYSTEM STRUCTURE..................................................................................................................................43
4.4. FEATURE DESIGN .....................................................................................................................................43
4.4.1. File storage and management .......................................................................................................43
4.4.2. File versioning and history management .......................................................................................44
4.4.3. File sharing .....................................................................................................................................44
4.4.4. File usage statistic ..........................................................................................................................44
V. CHAPTER 5 – OUTSTANDING SOLUTIONS AND CONTRIBUTIONS ........................................................ 44
VI. CHAPTER 6 – CONCLUSION .............................................................................................................. 44
I. Chapter 1 - General introduction
1.1. Problem
In the era of technology development, information exchange over the network
has become an indispensable need of people. Especially when the Covid-19
pandemic broke out like today, all human activities from going to work, going to
school, or shopping are done online at home. This led to the development of file
storage and sharing, which was present on any system on the Internet.

Currently, two of the most popular file storage and sharing systems are Google
Drive and One Drive. These are two systems that have been around for a long
time and have attracted a large number of users. Google Drive's popular audience
is teenagers and older, while One Drive is aimed at businesses. However, these
two systems still have some inconveniences, and have not optimized many
functions. For example, Google Drive does not have a shared folder management
function, the information when shared is quite open. Anyone after sharing a
document can delete the file or make changes without even knowing the owner
of the file in advance. Another example is that both systems do not have the
function of statistics of interactions with any file of the user, so it is not possible
to strictly control who has made changes to a file of a user. user. In addition, these
two systems have many other weaknesses, making them difficult to use, as well
as not suitable for their entire user base.

This report introduces a new file storage and sharing system, with the aim of
overcoming the disadvantages from the above two systems. The main audience
that this system targets is businesses. The details and each function of the system
will be described in the sections below.

1.2. Purpose and scope of work

The software creates a file archive with users, where they can share content with
other users, with different file manipulation rights. They can log in and then use
the software's functions.

When forget your password, user can request for resetting via the registered
email. New password will be emailed. They can then continue to log in to the
Software with the new password.

Anyone can change their personal information and have full discretion over their
file system and directory (add/view/delete/edit). They have the right to share files
and set permissions for their content files to other users.

For each different function, it is necessary to provide different interfaces suitable

for the implementation of those functions.
 1.3. Solution Overview
For developing a files and directories sharing system which applies the features
aforementioned in 1.2, the system will be built with two separate parts which are
server/backend and client/frontend.
- Architecture: Client – server Client-server model is a distributed
application structure that partitions task or workload between the providers
of a resource or service, called servers, and service requesters called
clients. This is the client – server advantages:
+ Centralized system with all data in a single place.
+ Cost efficient requires less maintenance cost and Data recovery is
possible.
+ The capacity of the Client and Servers can be changed separately.

- Design pattern: MVSC – Model – view – service – controller (MVSC) is

an extended version of the MVC software design pattern commonly used
for developing user interfaces that divide the related program logic into
four inter-connected elements which are Model, View, Service and
Controller
+ Organizes large-size web applications
+ Supports Asynchronous Method Invocation (AMI)
+ Easily Modifiable
+ Faster Development Process
+ Easy planning and maintenance
+ Returns data without formatting
+ Supports TTD (test-driven development)
+ Multiple Views
+ SEO-Friendly Platform

- Backend: Is the processing part of the system, written in Typescript

language and supported by Node JS. It will be applied the Model and the
Controller part in the design pattern. The Knex JS and Objection JS will
help in building the Model as well as the Express JS will build the
Controller and API

- Frontend: Displays Web page content on the browser using HTML

hypertext markup language, combined with CSS to align the interface,
JavaScript, written in Typescript language and supported by Node JS, Next
JS framework and React library. It will be applied the Service and the View
part in the design pattern. Axios library will play as the Service role, help
the UI call API to the server. Thank to the Material UI library, the UI will
be rendered in a simple, beautiful and easy to access.
 - All the Backend and frontend will be build to Docker Image and deploy to
the container in any physical machines

- For allocating the request from user to frontend as well as the request from
frontend to backend, Nginx will take responsible to do the “load balancing”
1.4. Thesis structure
Form the next chapter, the graduation thesis will be organized as follows:

- Chapter 2: Survey some highly rated and widely used file sharing sites. On
that basis, overview use case diagrams and flow diagrams will be given to
clearly see the interaction of the two agents (guest and users) with the
system and some non-functional requirements.

- Chapter 3: Representing the technologies will be used in the system such

as: Typescript, Node JS, Docker, Nginx, PostgreSQL, … .

- Chapter 4: Designs from overview to details of the whole system to see

more clearly each component of the system and the relationship between
those components. Finally, the results are achieved, some illustrations and
tests for a few important functions.

- Chapter 5: Introduce the outstanding contributions of the whole system. It

is the solution to the problem of users in the system, as well as the function.
Three of the most interested contributions are history and version logging,
Open API (third party integrations) and using Docker to deploy the system
so that make the system easier to scale and upgrade.

- Chapter 6: the final chapter of the project report, through to review the
results that the thesis have been achieved, to summarize gained knowledge
and experiences. Finally, there are a few development directions to
improve the quality of the product.
1.5. Dictionary

II. Chapter 2 – Analyzing the system

2.1. Current status survey
2.2. Use cases overview
 When not logged in, guests can register for a new account, log in, or request
a password reset when they forget their password, and reset their password when
they receive setup instructions via email. When the guest logs in, the software
displays a menu containing the corresponding functions. When the guest requests
to reset the password, the software generates the token and sends the password
reset instructions via email.
After logging in, the user can perform operations with their files and directory
given by the system, such as uploading files, creating directories and updating
personal information, and changing the password.
 2.2.1. Operating with file Use cases

2.2.2. Operating with directory Use cases

2.3. Use cases specification

The details of the use case are going to be described in this section.
 2.3.1. Guest use cases
2.3.1.1. Login
Name Login
Purpose Login allow a Guest becoming a User
Actor Guest
Pre- Actor already have an account and not be locked
condition
Post- Guest becomes User
condition
Main flow 1. Actor accesses Login.
2. The system shows up Login page.
3. Actor fills in the fields:
3.1. Actor fills in the wrong account or password, move
to branch flow 3.1.
3.2. Any required field is missed, move to branch flow
3.2
3.3. Account is locked, move to branch flow 3.3
4. Login is success, Actor will be directed to User pages.
Sub-flow No
Branch - Flow 3.1: System notifies account not exist. Ask actor to re-
flow fill the fields.
- Flow 3.2: System notifies not filled fields, Ask for re-filling
the fields.
- Flow 3.3: System notifies that account is locked.

• Fields in Login:
Name Description Required Eligibility conditions Example
Username User account Yes Accept letters, Longnh123
numbers, longer than
0 and shorter than 255
characters.
Password Password Yes Accept letters, 123456
numbers, longer than
0 and shorter than 255
characters.
 2.3.1.2. Register
Name Register
Purpose Allowing a Guest creating an account to become a User
Actor Guest
Pre- No
condition
Post- Guest owns a account and can use that account to login the system
condition
Main flow 1. Actor accesses Register page.
2. The system shows up Register pages.
3. The actor fills in the fields:
3.1. If one or many required fields are missed, move to
Flow 3.1.
3.2. Username is duplicated, move to Flow 3.2
3.3. Password is not strong enough, move to Flow 3.3
3.4. Email is not valid, move to Flow 3.4
3.5. Actor chooses “Cancel”, move to Flow 3.5
4. System saves the information and notifies success. Actor is
directed to the Login pages.
Sub-flow No
Branch - Flow 3.1: System notifies required fields not filled. Ask the
flow actor to fill the fields.
- Flow 3.2: System notifies username is duplicated, Ask the
actor to enter a new username.
- Flow 3.3: System notifies Password is not strong enough,
notifies a strong password condition. Ask for a new
password.
- Flow 3.4: System notifies email Is invalid, Ask for re-filling
the field.
- Flow 3.5: System directs the actor to the Login page.

• Fields in Register:
Name Description Required Eligibility Example
conditions
Username Username Yes Accept letters, Longnh123
numbers, longer
than 0 and shorter
 than 255
characters.
Password Password Yes Longer than 0, L@123456
shorter than 255
characters.
Include letters,
numbers or
special
characters.
Email Email used to Yes In form longnh@gmail.com
contact with xxx@xxx.xxx
the actor
Name Actor Name Yes Include letters Nguyễn Hoàng
and spaces. Long
Longer than 0,
shorter than 255
characters.
Birthday Actor No In form DD / MM 20/8/1999
birthday / YYYY,
A date exists in
real life.
Phone Phone Yes The length is 10 0123456789
number number used
to contact
with the actor

2.3.1.3. Forgot Password

Name Forgot Password
Purpose Change password when user forgets password.
Actor Guest
Pre- Guest owns an account and forgets password
condition
Post- Guest can login the system with a new password provided via a
condition email
Main flow 1. Actor chooses Forgot Password.
2. System shows up Reset Password page.
 3. Actor fills in the email field and chooses “Submit”.
- Email is invalid, move to Flow 3.1
- Actor chooses “Cancel”, move to Flow 3.2.
4. System checks email.
- Email does not exist, move to Flow 4.1
5. System sends a new password to entered email.
- System sends failed, move to Flow 5.1.

Sub-flow No
Branch - 3.1. System notifies email invalid, Ask Actor re-filling the
flow fields.
- 3.2. System directs the actor to the login page.
- 4.1. System notifies email does not exist.
- 5.1. System notifies errors and directs to Forgot Password
page.

• Used fields
Name Description Required Eligibility Example
conditions
Email Email used to Yes In form longnh@gmail.com
contact with xxx@xxx.xxx
Actor

2.3.2. User use cases

2.3.2.1. Log out
Name Logout
Purpose Logout user
Actor User
Pre- Actor is logged in the system
condition
Post- No
condition
Main flow 1. Actor chooses Logout
2. System shows a pop-up “Do you want to log out?”
3. Actor chooses Yes
- Actor chooses No, move to Flow 3.1
4. System directs actor to Guest pages
Sub-flow No
Branch - 3.1 System closes pop-up.
flow

2.3.2.2. Search
Name Search
Purpose Search directories or files
Actor User
Pre- Actor is logged in the system
condition
Post- Files/ directories are shown up in Search. Actor can open
condition directories or preview the files from search.
Main flow 1. Actor fills in the files or directories name in Search input
and chooses the search icon.
- Actor click outside the search input, move to Flow 1.1
2. System shows up files or directories available in the actor
repository.
- System does not find any result , move to Flow 2.1
Sub-flow No
Branch - 1.1 System directs actor to the previous page.
flow - 2.1 System shows up notifies “Not found any result”.

• Used fileds
Name Description Required Eligibility conditions Example
keyword Keywords in files Yes Longer than 0, shorter Lib
or directories than 255 characters.

2.3.2.3. Update information

Name Update information
Purpose Update user information.
Actor User
Pre- User is logged in the system.
condition
Post- Account information is updated successfully
condition
Main flow 1. Actor chooses Update information
2. System shows up update information pages.
3. Actor fills in the fields.
4. System checks and shows pop-up “Do you want to change
the information?”
- If one or many required fields are missed, move to Flow 4.1
- If one or many required fields are invalid , move to Flow
4.2
5. Actor chooses “Submit”
- Actor chooses “Cancel” , move to Flow 5.1
6. System updates the information, and notifies updating
successfully.
Sub-flow No
Branch - 4.1 System shows up notifies “Missing information” and
flow Ask fills in the missing fields.
- 4.2 System shows up notifies “Invalid form” and Ask re-
filling the invalid fields.
- 5.1 Back to Main Flow 2.
• Used fileds
Name Description Required Eligibility Example
conditions
Email Email used to No In form longnh@gmail.com
contact with xxx@xxx.xxx
Actor
Name Actor name No Include letters and Nguyễn Hoàng
spaces, Longer Long
than 0, shorter
than 255
characters.
Birthday Actor No In form DD / MM 20/8/1999
birthday / YYYY,
A date exists in
real life.
Phone Phone No The length is 10 0123456789
number number used
to contact
with Actor
 2.3.2.4. Use case Change Password
Name Change password
Purpose Change Password current password.
Actor User
Pre- User is logged in the system.
condition
Post- Password is changed successfully.
condition
Main flow 1. Actor chooses Change Password
2. System shows up Change Password pop-up includes the
fields described below.
3. Actor fills in fields.
4. System checks fields.
- New password is too weak, move to Flow 4.1
- New password and confirmed password do not match ,
move to Flow 4.2
5. Actor chooses “Submit” Change Password
- 5.1. Actor chooses “Cancel” , move to Flow 5.1
6. System checks and update password and shows up notifies
“Change Password successfully”.
- Actor fills in old password wrong, move to Flow 6.1
Sub-flow No
Branch - 4.1 System shows up notifies “Password is not strong
flow enough” and Ask re-filling the fields new password.
- 4.2 System shows up notifies “Password and Confirmed
password do not match” and Ask Actor re-filling the fields.
- 5.1 System directs actor to the previous page.
- 6.1 System notifies old password is not correct, backs to
Main Flow 2.

• Used fileds
Name Description Required Eligibility conditions Example
Old Current Yes Accept letters, and 123456
password Password numbers, longer than
0 and shorter than 255
characters. Password
 must be the same
current Password.
New New Password Yes Accept letters, 123456
password numbers, longer than
0 and shorter than 255
characters.
Confirmed Confirmed Yes Accept letters, and 123456
Password password numbers, longer than
0 and shorter than 255
characters. Match the
new password.

2.3.2.5. Use case Upload

Name Upload
Purpose Upload file to repository.
Actor User
Pre- User is logged in the system.
condition
Post- File is uploaded successfully.
condition
Main flow 1. Actor chooses Upload
2. System shows up Upload file page.
3. Actor chooses the file needed to upload.
- File is in forbidden form, move to Flow 3.1
- File name is duplicated, move to Flow 3.2
- File size is too large, move to Flow 3.3
- Actor chooses “Cancel”, move to Flow 3.4
4. System uploads the file , and shows up the upload progress.
- Upload file is failed, move to Flow 4.1.
5. System shows up notifies “Upload successfully” and
updates repository.
Sub-flow No
Branch - 3.1. System notifies “Invalid file extension”, and rejects
flow uploading file to system.
- 3.2 System notifies “Duplicated Name”, and rejects
uploading file.
 - 3.3 System notifies “File size is too large”, and rejects
upload file.
- 3.4 System directs actor to the previous page.
- 4.1. System notifies errors and backs Main Flow 2.

2.3.2.6. Use case Download

Name Download
Purpose Download file form repository User to local machine.
Actor User
Pre- User is logged in the system.
condition
Post- File is downloaded successfully.
condition
Main flow 1. Actor chooses the file needed to download and chooses
Download.
2. System checks file
- File does not exist, move to Flow 2.1
- Actor does not have permission to download the file, move
to Flow 2.2
- File name is duplicated with another file that existed in the
local machine download directory, move to Flow 2.3
3. System downloads file and shows up download progress.
- Download failed, move to Flow 3.1.
- Actor chooses Cancel, move to Flow 3.2.
4. System notifies download successfully.
Sub-flow No
Branch - 2.1 System shows up a pop-up “Current file does not exist”.
flow - 2.2 System shows up a pop-up “Do not have permission to
download file”.
- 2.3. System adds the mark to the end of the file name.
- 3.1 System directs actor to the previous page.
- 3.2. System shows up a pop-up “Do you want to stop
downloading the file?”. The user chooses Yes, System
moves to Flow 3.1 or chooses No, System closes the pop-
up and continues the download progress.
 2.3.2.7. Use case Preview
Name Preview
Purpose Preview file in repository.
Actor User
Pre- User is logged in the system.
condition
Post- File is opened preview mode.
condition
Main flow 1. Actor chooses file.
2. System shows up preview.
- 2.1. File is not exist , move to Flow 2.1
Sub-flow No
Branch - 2.1 System shows up pop-up “File hiện tại not exist”.
flow
• Các định dạng file được hỗ trợ:
Extension Previews
Documents 20 first pages
PDF 20 first pages
Image Image
Video Video player
Audio Audio player.
Other Icon, name, size, date added

2.3.2.8. Use case Set Permission permissions

Name Description
View User is set permissions can View Files or directories.
View and User is set permission can View and download Files or
download. directories.
Edit User is set permissions can View and delete Files or
directories and upload file directories.

2.3.2.9. Use case Share

Name Share
Purpose Create URL to share Files or directories for the other user access.
Actor User
Pre- User is logged in the system.
condition
Post- URL to share Files or directories is created successfully.
condition
Main flow 1. Actor chooses Files or directories and chooses Share.
2. System shows up Share.
- Files or directories are not exist, move to Flow 2.1.
- Files or directories do not belong to Actor, move to Flow
2.2
3. Actor choose:
- Choose “Share to individual or group”, move to Sub-flow
3a.
- Choose “Share to all”, move to Sub-flow 3b.
- Choose “Cancel”, move to Flow 3.1
Sub-flow - 3a. Actor chooses “Share to individual or group”
+ 3a.1 Actor fills in user needed to share.
• Actor fills in email do not available in the register list, move
to 3.2.
+ Actor continues performing Use case “Set Permission” with
Sub-flow 3a.
- 3b. Actor chooses “Share to all”.
+ Actor continues performing Use case “Set Permission” with
Sub-flow 3b.

Branch - 2.1 System shows up pop-up “File or directories do not

flow exist”.
- 2.2 System shows up pop-up “File or directories do not
belong to you”.
- 3.1. System directs the actor to the previous page.
- 3.2. System notifies email does not exist and does bot set
permissions to that email.

• Used fileds
Name Description Required Eligibility Example
conditions
Email Email used to No In form longnh@gmail.com
contact with xxx@xxx.xxx
Actor

2.3.2.10. Use case Delete File

Name Delete File
Purpose Delete file from repository.
Actor User
Pre- User is logged in the system.
condition
Post- File delete successfully.
condition
Main flow 1. Actor chooses directories needed to delete and chooses
Delete.
2. System shows up a pop-up “Do you want to delete this file?
This action can not be reverted”.
- File does not exist, move to Flow 2.1
- File does not belong to Actor, move to Flow 2.2
3. User chooses “Submit”.
- User choose “Cancel”, move to Flow 3.1
4. System updates and shows up notifies file is deleted.
Sub-flow No
Branch - 2.1 System shows up pop-up “File is not exist” and
flow refreshes the page.
- 2.2 System shows up pop-up “File does not belonged to
you”.
- 3.1 System directs actor to the previous page.

2.3.2.11. Use case Watch List File

Name Watch List File
Purpose View list of files available in directories.
Actor User
Pre- User is logged in the system.
condition
Post- List file in directories is shown up.
condition
Main flow 1. Actor chooses directories needed to View.
2. System shows up a list of files available in directories.
- 2.1. Directory does not exist , move to Flow 2.1
- 2.2. Directory does not belonged to Actor, move to Flow
2.2

Sub-flow No
Branch - 1.1 System shows up pop-up “Directory does not exist”.
flow - 1.2 System shows up pop-up “Directory does not belonged
to you”.

• Used fileds
Name Description Example
Name File name New Dir 1
Type File extension doc
Size File size 17 KB
Time The day that file is 8:00 13/4/2020
Added upload

2.3.2.12. Use case Create

Name Create
Purpose Create directories.
Actor User
Pre- User is logged in the system.
condition
Post- Directory is created successfully.
condition
Main flow 1. Actor chooses “Create a new directory”.
2. System shows up Create directories.
3. Actor fills in the directory name and chooses “Submit”
- Actor chooses “Cancel”, move to Flow 3.1
4. System checks Directory name.
- 4.1 Directory name is too long, move to Flow 4.1
- 4.2 Directory name is duplicated directories is existed in
the repository , move to Flow 4.2
5. System shows up notifies “Directory is created”.
Sub-flow No
Branch - 3.1 System directs actor to the previous page.
flow - 4.1 System notifies “Directory name is too long” and Ask
Actor re-filling the fields.
- 4.2 System notifies “Directory name is duplicated” and Ask
Actor re-filling the fields.

• Trường dữ liệu đầu vào

Name Description Required Eligibility conditions Example
name Directory name Yes Longer than 0, shorter New Dir 1
than 255 characters.

2.3.2.13. Use case Delete

Name Delete
Purpose Delete directories.
Actor User
Pre- User is logged in the system.
condition
Post- Directory is deleted successfully.
condition
Main flow 1. Actor chooses directories needed to delete and chooses
“Delete”.
- directories do not exist, move to Flow 1.1
- directories Does not belonged to Actor , move to Flow 1.2
2. System shows up pop-up “Do you want to delete directories
trên? All the data stored in directories will be delete
permanently and can not be reverted”.
3. Actor chooses “Submit”.
- Actor chooses “Cancel”, move to Flow 3.1
4. System updates and shows up notifies directories is deleted.
Sub-flow No
Branch - 1.1 System shows up pop-up “Directory does not exist”.
flow - 1.2 System shows up pop-up “Directory does not belonged
to you”.
- 3.1 System directs actor to the previous page.
 2.4. Flows of System
This section of the thesis will specify the flow of the system by sequence
diagrams, each diagram represents the main flow of the aforementioned use cases.

2.4.1. Login

2.4.2. Register
2.4.3. Forgot password

2.4.4. Search

2.4.5. Change Information

2.4.6. Change password

2.4.7. Upload

2.4.8. Download
2.4.9. Preview

2.4.10. Set permission

2.4.11. Share

2.4.12. Delete File

2.4.13. Watch List File

2.4.14. Create Directory

2.4.15. Delete Directory

III. Chapter 3 – Technologies
3.1. Client-Server Architecture
“Client-Server” is a distributed application structure in which tasks and jobs
are divided between resource or service providers called “Server” and resource
or service consumers call “Client”. Client and server communicate with each
other through computer networks on separate hardware or on the same system.
The clients normally share nothing with the server, they request resources from
the server. So that, they will set up the session to communicate with the server,
meanwhile, the server will be kept alive to wait for requests, handle them and
respond to the clients.
Clients and Servers “talk” to each other via messages, the messages coming
from the Client to Server are requests, the ones coming from Server for answering
those requests to the Client are responses through an Inter-process
Communication (IPC) and the messages must be in a standard called “Protocol”.
Nowadays, in the Application Layer in TCP/IP Model, there are many choices to
choose protocols for the app such as HTTP, MQTT, AMQP, FTP, SMTP and so
on, however, HTTP is the most popular one for developing a web application, the
others still have their own strengths but they will be used in some special cases
(FTP is used for file transfer, SMTP is used for sending emails,…).
The client will be responsible for providing the user interface (UI) and user
experience (UX) to the end-user, sending and receiving the message from the
server and presenting the data contained in the messages in an appropriate
method.
The server will be responsible for receiving the message from clients,
handling them and sending the result back to the clients.

3.2. Model – View – Service – Controller (MVSC) Design

Pattern
 Model – view – service – controller (MVSC) is an extended version of the
MVC software design pattern commonly used for developing user interfaces that
divide the related program logic into four inter-connected elements which are
Model, View, Service and Controller
Components
- Model is the application's dynamic data structure, independent of the user
interface. It directly manages the data, logic and rules of the application. It
connects to the database
- View is the representation of information.
- Controller accepts the request from, contacts for data from the model,
handles them and sends the result back to the view.
- Service is a bridge for view in the client communicating with the controller
in the server.

Mechanism
- The model is responsible for managing the data of the application. It
receives user input from the controller, queries into the database to get
suitable records or performs data transformations (create, update or delete
records) and returns to the controllers.
- The view renders the presentation of the data received from the service in
a particular format.
- The controller responds to the user input from services, performs
interactions on the data model objects, collects the records returned by
 models and handles the logic interaction with those data before passing
them to services. The controller receives the input, optionally validates it
and then passes the input to the model.
- The service is responsible to transfer the user inputs from views, direct
them to the right function in the controller and return the result from them.
As with other software patterns, MVC expresses the "core of the solution" to a
problem while allowing it to be adapted for each system. Particular MVC designs
can vary significantly from the traditional description here.

3.3. PostgreSQL
PostgreSQL is one of the most advanced, free and open source object-relational
database management system (RDBMS) available. It is high scalability and
compliance with technical standards, designed to handle a wide range of
workloads, from personal computers to data warehouses or Web services with
many concurrent users.
- Developed by PostgreSQL Global Development Group, First Released:
08/07/1996.
- Flexible and can be run on a variety of platforms such as Mac OS X,
Solaris, and Windows.
- Free and open source software so PostgreSQL can be used, modified, and
disseminated by anyone for any purpose.
- Highly stable.

Features
PostgreSQL integrates many great features to help developers build apps that
respond to complex functions, query quickly, and securely maintain integrity and
reliability. To be more reliable, It also provides various security, authentication,
and disaster recovery options. PostgreSQL has proven to be highly scalable both
in terms of the amount of data and the number of concurrent users.
- Complex query (complex query)
- Event procedures (triggers)
- Views
- Integrity transactions
- Multi-version concurrency control
- Parallel query (parallel query)
- Streaming replication
 Datatypes
- Primitives: Integer, Number, String, Boolean
- Structure: Date/Time, Array, Range, UUID.
- Document: JSON/JSONB, XML, Key-value

Data integrity
- UNIQUE, NOT NULL
- Primary Keys
- Foreign Keys
- Exclusion constraints
- Function Lock, Recommended Lock
- Concurrent, efficiency
- Cataloging: B-tree, Multicolumn, Expressions, Partial
- …

Security
- Authentication: GSSAPI, SSPI, LDAP, SCRAM-SHA-256, Certificate
and others
- Powerful access control system
- Column and row level security

Ability of extension
- Storage method
- Procedural Languages: PL/PGSQL, Perl, Python (and many more)
- External data wrapper: connect to other databases or streams with standard
SQL interface
- And many extensions provide additional functionality, including PostGIS
- Text search:
- Support for international character sets, e.g. through ICU collations
- Full-text search
3.4. Typescript and NodeJS
3.4.1. Typescript
TypeScript is a programming language developed and maintained
by Microsoft. It is built on JavaScript
TypeScript may be used to develop JavaScript applications for both
client or server execution (as with Node.js). The default TypeScript Compiler can
be used or the Babel compiler can be invoked to convert TypeScript to JavaScript.
 TypeScript offers all of JavaScript’s features and an additional layer on top
of these: TypeScript’s type system. This means that your existing working
JavaScript code is also TypeScript code. The main benefit of TypeScript is that it
can highlight unexpected behavior in your code, lowering the chance of bugs.
3.4.2. NodeJS
Node.js is a free, open-source server environment and runs on various
platforms (Windows, Linux, Unix, Mac OS X,…). It uses asynchronous
programming, eliminates the waiting, and simply continues with the next request.
It also runs single-threaded, non-blocking, which is very memory efficient.
- Nodejs generate many dynamic page content
- Node.js can create, open, read, write, delete, and close files on the server
- Node.js can collect form data
- Node.js can add, delete, and modify data in your database
- Node.js can do anything that a server app needs to do.
3.4.3. Knex JS and Objection JS
Knex.js is a. SQL query builder for PostgreSQL, MSSQL, MySQL,
MariaDB, SQLite3, Better-SQLite3, Oracle and Amazon Redshift designed to be
flexible, and portable to use.
It features both traditional node style callbacks as well as a “Promise” interface
for cleaner async flow control, a stream interface, full–featured query and schema
builders, transaction support (with save points), connection pooling and
standardized responses between different query clients.

Objection.js is Object-relational programming (ORM) for Node.js that

aims to stay out of your way and make it as easy as possible to use the full power
of SQL and the underlying database engine while still making the common stuff
easy and enjoyable. Objection.js is built on an SQL query builder called Knex.js.
All databases supported by Knex are supported by Objection.js. SQLite3,
Postgres and MySQL are thoroughly tested.
3.4.4. Express JS
Express.js is a framework built on top of Nodejs. It provides powerful
features for web or mobile development. Express.js supports HTTP and
middleware methods creating an ie API.
Features:
- Set up intermediate classes to return HTTP requests.
- Define router allows use with different actions based on HTTP method and
URL.
- Allows returning HTML pages based on parameters.

Routings:
 Routing refers to determining how an application responds to a client
request to a particular endpoint, which is a URI (or path) and a specific HTTP
request method (GET, POST, and so on).
Each route can have one or more handler functions, which are executed
when the route is matched.
Defining routing using methods of the Express app object that correspond
to HTTP methods; for example, app.get() to handle GET requests and app.post to
handle POST requests. For a full list, see app.METHOD.
These routing methods specify a callback function (sometimes called
“handler functions”) called when the application receives a request to the
specified route (endpoint) and HTTP method. In other words, the application
“listens” for requests that match the specified route(s) and method(s), and when
it detects a match, it calls the specified callback function.

Middlewares
Middleware functions are functions that have access to the request object
(req), the response object (res), and the next function in the application’s request-
response cycle. The next function is a function in the Express router which, when
invoked, executes the middleware succeeding the current middleware.

Middleware functions can perform the following tasks:

- Execute any code.
- Make changes to the request and the response objects.
- End the request-response cycle.
- Call the next middleware in the stack.
3.4.5. Axios
Axios is a simple promise-based HTTP client for the browser and Node.js.
Axios provides a simple to use the library in a small package with a very
extensible interface.
3.4.6. Next JS and React JS
React is a JavaScript library for building user interfaces. The purpose of
creating ReactJS was to create attractive web applications with high speed and
efficiency with minimal coding. And the main purpose of ReactJS is that every
website when using ReactJS must run smoothly, quickly, and be highly extensible
and simple to implement. All the features or power of ReactJS usually comes
from focusing on components because of this point when working on the web
instead of it will work on the entire application of the website, ReactJS allows
developers to divide the user interface from a complicated page and make it into
simpler components and reuse them means that rendering of data can not only be
done at the server location but can also be done at the client when using ReactJS.
 Next.js is an open-source React framework that adds features like Server-
Side Rendering (SSR) and Static Site Generation (SSG). Next.js is built on top of
the React library which means Next.js takes advantage of React and adds features.
- Server-Side Rendering: SSR allows the server to access all required data
and process JavaScript to display on the web page. Under this mechanism,
most of the logical processing is on the server side. In which, the server
performs processing and performs operations with the database to translate
(render) to HTML, then send the response to the client. The client's browser
will also render this HTML only.
- Search Engine Optimization (SEO): Using SSR also gives you an SEO
advantage, helping your website show up higher on search engine results
pages. SSR makes websites rank better for SEO because they load faster
and more website content can be scanned by SEO trackers.
The main advantage of Next.js is its built-in SSR support for increased
performance and SEO. Server-Side Rendering (SSR) works by changing the
request flow of a React application so that all components except the client send
their information to the server.
3.4.7. Material UI
Material UI is a library of React Components that has been integrated with
Google's Material Design.
Material UI gives your website a comprehensive, unified interface, with buttons,
text fields, toggles,… designed in a style.
3.5. Docker
Docker is a platform that provides an easier way to build, deploy and run
applications using containers (on a virtualization platform).
- Docker Engine: is the main component of Docker, as a tool to package
applications
- Docker Hub: is a “GitHub for docker images”. On DockerHub there are
thousands of public images created by the community allowing you to
easily find the images you need. And just pull back and use with some
config you want.
- Images: is a template for creating a container. Usually, the image will be
based on an existing image with additional customizations. For example,
you build an image based on a sample Centos image available to run Nginx
and customize and configure your web application to run. You can build
your own image or use shared images from the Docker Hub community.
An image will be built based on the instructions of the Dockerfile.
- Container: is an instance of an image. You can create, start, stop, move or
delete containers based on Docker API or Docker CLI.
- Docker Client is a tool to help users communicate with the Docker host.
- Docker Daemon: listens to requests from Docker Client to manage objects
such as Containers, Images, Networks and Volumes through REST API.
 Docker Daemons also communicate with each other to manage Docker
Services.
- Dockerfile: is a file that contains instructions for building an image.
- Volumes: is the piece of data created when the container is initialized.

Execution of a system using Docker

- Build: Create a dockerfile which contains source code. This Dockerfile will
be built on a computer that has Docker Engine installed. After the build,
the Container will be generated, in this Container contains the application
with our library.
- Push: After getting the Container, this Container will be pushed to the
cloud and save it there.
- Pull, Run: If another computer wants to use the Container, it must be forced
to pull this container to the machine, of course, this machine must also
install Docker Engine. Then execute this Run Container.

Docker Compose is a tool used to define and run Docker programs that use
multi-containers. With Docker Compose, we use a YAML file to set up the
necessary services for the program. Finally, with one command, we will create
and start all services from those settings.
Using Compose typically involves the following three steps:
- Declare the program's environments in the Dockerfile.
- Declare the necessary services for the program in the docker-compose.yml
file so that the services can run together in an environment.
- Run the docker-compose up command to start Compose and run the
program.
Docker Compose has commands that allow to manage your program's lifecycle:
- Start, Stop and Rebuild the service.
- View the status of running services.
- View the log output of the running service.
3.6. Nginx
NGINX is open source software for web serving, reverse proxying, caching, load
balancing, media streaming, and more. It started out as a web server designed for
maximum performance and stability. In addition to its HTTP server capabilities,
NGINX can also function as a proxy server for email (IMAP, POP3, and SMTP)
and a reverse proxy and load balancer for HTTP, TCP, and UDP servers.
IV. Chapter 4 – Designing the system
4.1. Database design

The database include 6 tables representing for 6 entities in the system.

- Users: is used to store user information
Detail of Users table
Field Type Description
id Integer Identification number of user
username String User’s username used to login the
system
password String User’s password used to login the
system (the pass word is hashed with
a secret key to store in the database).
This field will never be return via any
API.
name String User’s name
 birthday Unix String User’s birthday
gender String User’s gender
email String User’s email
rootDirectoryId Integer Id of Directory belonged to user
createdAt Unix String

- Files: is used to store all the files information (not included the content of
file which is stored in the server disk)
- Detail of File table
Field Type Description
id Integer Identification number
physicalLocation String File location in the server disk
name File’s name
size Integer File’s size
type File’s type (extension)
ownerId Integer Owner of the file id
defaultOperation The default operation of file
directoryId Integer The parent directory id
views Integer Number of views by owner
downloads Integer Number of downloads owner

- Directories: is used to store all the directory information (not included the
content of file which is stored in the server disk)
- Detail of Directories table
Field Type Description
id Integer Identification number
physicalLocation String File location in the server disk
name String Directory’s name
ownerId Integer Owner of the directory id
defaultOperation Integer The default operation of directory
directoryId Integer The parent directory id

- Permission: is used to store all the permissions of users with files or

directories to indicate who have permission to what item.
- Detail of Permissions table
Field Type Description
 id Integer Identification number of user
userId Integer User Id that is given permission to file
or directory
fileId Integer File id that is given permission to user
directoryId Integer Directory id that is given permission to
user
operation Integer Highest operation which allow user to
perform
views Integer Number of views by user
downloads Integer Number of downloads by user

- Histories: is used to store the information about user’s actions such as

creating directory, upload file, edit file or directory, … .
- Detail of Users table
Field Type Description
id Integer Identification number of user
userId Integer User id that created the actions
fileId Integer File id that is affected by user’s action
directoryId Integer Directory id that is affected by user’s
action
operation Integer Operation that performed on the item
createdAt Unix String Moment that action is performed
message String Other info of actions
versionId Integer Version Id of the file if user change
content of the file

- Versions: is used to store the versions of files. While Files table save the
information of the current file, Versions table save the information of
previous one. Whenever user edit file with a new content the current
content will become a version.
Detail of Users table
Field Type Description
id Integer Identification number of user
userId Integer Owner of the file id
fileId Integer File Id
physicalLocation String File location in the server disk
createdAt Unix String Moment that created the version
4.2. Class and package design
The classes and packages is designed after the MVSC Design Pattern. The
system includes 4 packages which are Model Package, Controller Package,
Service Package and View Package.

- Model Package is the lowest level of the design pattern, it directly

connects to the database. Except the Base Model class, each class in
Model package represents for an table in database and contains the
properties (the columns in the table) and functions (querying to get the
records). Each of object created by Model class will represent to a record
in the table. Base class which all Model class must be extended is a class
support some simple function to query to the database, … .
- Controller Package contains the Controller classes which receive the
request from the Service, handle the logic process and return to the
service. A controller can have many Model for querying and handling the
logic, checking the validity of data before inserting, updating or deleting
the records to the database
- Service Package plays as a backend and frontend map. The classes in this
package define the which API is mapped to which function in the
Controller. It also takes responsible for checking the authentication, … .
- View Package defines the User interface help user to communicate with
the system. It also calls the API and presents them to the user.
4.3. System structure

4.4. Feature Design

4.4.1. File storage and management
- User will create an account to using the system, they will be provided an
25 GiB on server for saving their data.
- The user are freed to store their files such as: images, videos, audios,… as
well as the files do not in the invalid extensions list.
- They totally can organize their files by creating directory and uploading
file to it.
- After uploading file, for the supported extension files, user can preview it
such as listening the audio files, watching the video files, viewing the
images files, ….
- The user can edit the file name (do not change extension) and upload
another one (must be in the same extension) to replace the current file.

4.4.2. File versioning and history management

- Every single action on every files or directory will be logged as a history
record. The actions can be creating a file in a directory, previewing a file,
downloading a file, editing a file, deleting a file, …
- When a file is uploaded for editing a current file, the old file will be saved
a version of a file.
- User can download the current version of the old one.
- User who have permission can view the history or version of file

4.4.3. File sharing

- User can share their file to other users to view, download, or edit,…
- User can share their directory to other users to upload file into it, or view
content inside it,…
- The users who are shared the permission can perform actions
corresponding to that permission.

4.4.4. File usage statistic

- System have a dashboard for user to view what are the most access file or
directory, the recent access file or directory,…
- System also logs the file usages, such as the used capacity, the number of
views or download by the file owner or other user.
- The aforementioned statistic number will be showed in dashboard by graph
for user to visualize their usage data.

V. Chapter 5 – Outstanding solutions and contributions

VI. Chapter 6 – Conclusion