Remote file-system browser web-app


Work with Ian on Peergos is progressing well, to the point where our distributed-secure-file-system finally needs a remote file-system browser (like Explorer, Finder etc.) and despite my standing revulsion for all things Javascript, I plunged in.


Specifically, we required a web-app file-system browser which could support file-upload & download, deletion, sharing and so on. I immediately wanted to use Bootstrap to make the design responsive (look different on different sized screens) but there was still one problem...

Let's face it: web UIs are tricky. I attribute most of this to the weak-typing and general difficulty to create invariants in Javascript. For example, what do you think this expresson:

["10", "10", "10"].map(parseInt)

evaluates to? Props if you were expecting this:

[10, NaN, 2]

But I digress. For this reason, I decided to try something new: Facebook's React Javascript UI library. At first I was skeptical but after four hours I had a working prototype and after two working days (integrated over a week) the task was feature complete. Essentially within React's model you tend to write more modular, composable JS code... and that's something the world desperately needs.

A web-app file-system browser

The project is open-source and available on Github. To simulate the backend filesystem I created a simple Flask server that supports filesystem operations in a chroot environment with cookie-based session management and password-based authentication (specified as a server command-line parameter) but bear in mind this is little more than a mock for the web-ui, albeit a functional one supporting:

  • Grid and list views;
  • File upload and download;
  • Context menu (right / long click) with rename and delete options;
  • Navigation buttons (back, up etc.);
  • Sorting on file attributes (size, name, last-modified time);
  • Directory creation;
  • Cookie-based session management and simple password authentication;

A few screen-grabs on a large / small screen are shown below.

Desktop grid-based view

Desktop grid-view of my local / dir.

Desktop list-based view

Desktop list-view of my local / dir.

Mobile grid-based view

Mobile grid-view .

Mobile list-based view

Mobile list-view.


This web-app is now feature complete and destined to be the Peergos front-end but please feel free to fork it or submit a pull request. Also a disclaimer, although there is password authentication it is still pretty far from being "secure" without proxying it through a local HTTPS server and auditing the Flask server security.

Go Top