forest
/
image-gallery
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Example of an image-uploading app that can resize large phone photos before uploading them, and then compress to AVIF on the server side.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
8 Commits
1 Branch
0 Tags
365 KiB
 
 
 
 
 
 
Branch: main
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'main'
${ noResults }
Your Name 58f0909216
issues 		4 weeks ago
readme add demo to readme 4 weeks ago
static first public commit 4 weeks ago
.dockerignore first public commit 4 weeks ago
.gitignore correct gitignore 4 weeks ago
Dockerfile clean up a bit and add readme 4 weeks ago
ReadMe.md issues 4 weeks ago
build-docker.sh clean up a bit and add readme 4 weeks ago
go.mod first public commit 4 weeks ago
go.sum first public commit 4 weeks ago
index.gotemplate.html first public commit 4 weeks ago
main.go clean up a bit and add readme 4 weeks ago

ReadMe.md

image-gallery

screenshot of the image-gallery web application. three photos: a cat sitting on a wifi router, an analog oscilliscope, and some green grapes

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