Home / Diary of a solo dev building a web app / Day 14: image preview, file rename edit
Try Documentalist, my app that offers fast, offline access to 190+ programmer API docs.

💡
This is a dev diary of implementing Filerion, a web-based file manager for online storage (Dropbox, OneDrive, Google Drive, s3 and more).
Today:
  • implemented simple image preview for local filesystem and Dropbox and s3
    • it’s the simplest possible implementation: just Image element with src being the URL of the image file. For local files, we can get url out of File object. For Dropbox and S3 we need to create a temporary, publicly visible URL It only works for image types natively supported by browsers. Luckily, browsers support most popular image format. In the future might add support for more images via conversion.
  • slightly improved file list status line by adding folder and file icons:
  • make double-click on an image file preview it. Similar to how desktop file managers behave
  • implemented so called “natural” sorting of file names. In a file manager you want foo9.txt show up before foo10.txt. Unfortunately sorting by characters doesn’t do that because 1 is before 9. So called “natural” sorting does the right thing. Turns out it was very simple to implement: a.localeCompare(b, navigator.languages[0] || navigator.language, {numeric: true, ignorePunctuation: true})
  • integrated posthog for analytics. It’s important to know which features users use. To do that you need to a way to capture and analyze events. I’ve never done but for Filerion I decided to give posthog a try. It’s an experiment, it’s too early to know if
  • implemented file rename
  • lesson: file rename dialog isn’t very complicated but there’s one extra touch: the cursor is positioned at file extension, not the end. The idea being that you probably don’t want to change the extension of the file

Feedback about page:

Feedback:
Optional: your email if you want me to get back to you:

Need fast, offline access to 190+ programmer API docs? Try my app Documentalist for Windows