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
