image-gallery

demo:

https://image-gallery.sequentialread.com/

upload password: example

I created this application as an alternative to something like Instagram / Google Photos. I wanted my family to be able to share their photos while we were traveling, and so this app needed to be easy to use and work without a good internet connection.

The app allows the user to upload multiple photos at once. Then it will resize each on on the client side using an HTML <canvas> element and some JavaScript. The app will attempt to upload the images one at a time and display a progress bar.

The app attempts to extract the date and time the photo was taken from the EXIF data so that all the photos can be sorted chronologically.

Finally, the photos are placed into a queue on the server side and re-encoded as AVIF in order to make them download as fast as possible while retaining good image quality. It uses https://github.com/kornelski/cavif-rs to do the encoding.

The previous and next images are triggered to start downloading as soon as a full resolution image is displayed, allowing the viewer click through multiple images without experiencing any lag waiting for it to download the next image in the sequence.

known issues

Since I was in a big hurry to get this thing out the door, the implementation is quite messy:

• The previous and next buttons can go off the page when viewed on a phone and there's no gesture support
• its a spa without any browser URL state manipulation, so back button doesnt work.
• I only ever tested the Rust build (for the avif encoder) for 32-bit arm, since that's what my server was running.
• Different phones will use different time zones for the EXIF timestamp strings, but they will remove the timezone from the EXIF data. So the chronological sorting can get messed up if multiple different models of phones are used to upload images.
• The upload can fail halfway through, and then the user won't immediately know which images have to be re-attempted and which don't.
• The AVIF encoding of the full size image happens asynchronously in a queue and there is no indication of it in the UI yet.
• There is no way to delete an image yet
• There is only one gallery, no way to create additional galleries
• It will throw errors in various situations