/ftp-client

A web-based ftp client

Primary LanguageTypeScriptMIT LicenseMIT

ftp-client

FTP Client that can be used as a WebFTP (and as an electron app).

Note: The electron app does not exist yet.

Features

  • Editing text files
  • Viewing images
  • Drag and drop uploading
  • Folder uploading
  • Folder downloading as zip
  • Mobile friendly
  • Caching for fast folder navigation
  • Calculate the size of folders
  • Viewing gzipped files
  • Viewing Minecraft NBT files

Technical information

Folder structure

src/common - common code included both on the website and electron app.

src/protocol - common code for the server and website, mostly related to the protocol used for the websocket connection.

src/web - code only availiable on the website.

src/server - source for the server.

folders

Note: The electron app does not exist yet.

Build Tools

The website uses Vite.

The server code is also inside the src folder, which might be a little confusing at first. This is because the code in src/protocol is shared between the websocket server and the website. The server folder contains the npm submodule and esbuild config for building the server. A server/bundle.js file is created which is executed to start the server.

The easiest way to start developing is to use Docker: docker-compose up

Wireframes

Desktop Desktop

Mobile Mobile

Features & TODO

  • Context menu
  • Editor base
  • Previewing images
  • Previewing text (maybe, or just editing - text)
  • Editing text
  • Folder Entry selecting
  • Choose how to open file with unknown file extention (as text, or image, maybe a hex viewer?)
  • File uploading (protocol)
  • Drag and drop file uploading
  • File uploading via file input
  • Upload button choose file or folder
  • Folder uploading (fun!)
  • Zip uploading, jszip
  • Folder downloading as zip, jszip
  • Compute size of folder
  • Left sidebar
  • Right sidebar
  • Editable Path
  • Cache
  • Electron app
  • Work on mobile
  • File deleting
  • File renameing
  • mkdir
  • Reconnecting
  • Folder deleting
  • Viewing gzipped files
  • Current Open Editors window on the bottom right.
  • Nicer dialogs
  • Prevent saving gzipped files.
  • Nbt reading and writing
    • Nbt editing
    • Nbt writing
    • Copying nbt as snbt and binary nbt in the editor
    • Reading region files

Protocol spec

The website can't send FTP requests on it's own and requires a websocket server to handle the requests for it. This sections describes the protocol used for communication between the website and the websocket server.

Most of the time the website (client) sends requests to the server, in which the server replies.

Packets currently use JSON. The data and response must be a json object, and may not be an array for example. The packet id is placed in the packetId property. The client can also include a requestId property, and if that is done the server will send a reply in which the json contains the same requestId property. Some packets need to contain binary data, for example file upload and downloads. In these cases the data should be encoded as a base64 string.