/
Words written by me /
Diary of a solo dev building a web app / Day 2: displaying list of files
edit

This is a dev diary of implementing Filerion, a web-based file manager for online storage (Dropbox, OneDrive, Google Drive, s3 and more).
Yesterday the file display could only display a flat list of files.
Real filesystem are nested so I started on a file system abstraction:
- the notion of current directory
readDir(dir)
function that returns list of file system entries (files or directories) in a given directory- notion of files vs. directories
In the UI, I’ve implemented:
- show directories differently than files
- when double-clicking a directory, navigate to that directory
- add virtual
..
directory to navigate to parent directory - sort files by name, with directories at the top
- show current directory (very crudely)
- disable text selection in file list to behave more like an app (
user-select: none
)
Here’s the current UI for showing files

I then implemented a selector for picking a file system:

Then I implemented
Open Local Folder
option using file system access API in browsers.
Added directory navigation icons from https://icon-sets.iconify.design/bi/bookmark-star-fill/:

Only
up
button is functional.
And all that while watching season 2 of The Flight Attendant.