I recently decided to reorganize my photo collection (again).  And after reviewing many options I decided I didn’t like any of them (again).   There are many good enough options for viewing photos.  But I haven’t found any that make it easy to sort, manage, organize, and tag over 40,000 files (photos & video) 

This time, instead of making do with what I could find, I decided to write my own media manager.   I’d mostly finished my last project and had lots of free time over Christmas and it seemed perfect for getting back into C# and Javascript after a couple of years of Java.   I also want to work on my blogging/writing so I’ll try to write an article a day on things I find most interesting.

The C# & javascript code for the application is on github (MediaTagger).

It uses a  git submodule (drjs) that includes javascript code I’ve been using and extending for 15+ years.  I made quite a few improvements for MediaTagger.  

For each blog, I’ll create simple example pages & Javascript in another github repository (javascript-examples)

These will not be javascript tutorials.  Just explanations of how I’m using javascript and why. 

I know everything I’m doing has been done 100s (1000s) of times and there are packages, frameworks, and libraries to make it easier.  But I love re-inventing things in my personal projects, and I think understanding some possible implementation details makes me better at using and extending common libraries on client projects.

MediaTagger (The application)

I have 2 functional requirements

  1. Organize a library of 40,000 (and growing) media files
  2. Find the files I want 

Organization includes

I have a simple C# web server that

I had a windows UI initially, but quickly decided I’d rather use a browser front-end even if I only planned to use it on the local machine.  So I switched to an HTML/javascript/css UI.   The application is a single dotnet page.  The key parts are


    <section id=’main-content’>


    <script type=”module”>

        const {MediaTaggerApp} = await import(‘../js/mt-app.js’);

        var app = new MediaTaggerApp();




The javascript module mt-app.js uses many other modules, HTML templates, and the C# HTTP API to provide the UI.  I am able to smoothly view, sort, and tag all of my files (once the browser has cached thumbnails.

Javascript Modules

I have many javascript modules I’ve used for years (basic “scripts” before javascript supported modules).   MediaTagger has many application-specific modules. They are in MediaTagger/wwwroot/js on github.  The subfolders are

component – each HTML template has a javascript component module
controls – I had planned to do more but only has a barely used tree control
data – data  entity modules (MediaFile, Tag, etc)
modules – general purpose modules