For my family upload system has a simple upload flow right now:

  1. Select a set of one or more files
  2. Display a preview of the image
  3. Generate an HMAC & check if it exists in the system
  4. If the image does not yet exist then upload it
  5. Display completion message.

A user has a new Pixel 3XL however there are some interesting results with this particular work flow. When the device turns off the uploads seem to stall or are terminated. The system will also run out of memory with many previews loaded into memory (30+ images) which seems to reload the page. I mean that makes sense from a failure domain, perhaps there is an error in the browser I can catch there.

In general neither the display nor the processing are particularly intelligent. First major step I would love to take is removing that. My first general challenge tonight is untangling my mess of code. Totally willing to admit I wrote this dirty since this was the first time I have dealt with in-browser uploads before.

I think long term the target will be a WebWorker who will consume each image as it is chosen, then report the state as it transitions through. Definitely a longer term project for next month. Hopefully abating the screen turning off causing the page not to be informed about the completion of the many uploads.

In this session I hope to remove the memory issue. Under the condition the image has already been uploaded then I could swap out the image for the remote image. This could also happen when the image has completed. Moving this to a browser issue.

Overall it was fairly trivial since the preview process involves turning the images into data URLs. After an image has completed it’s checksum or upload it will flip the preview URL out for the one of the server. Under the performance tools in Chrome with just a single image showed a noticeable decrease in memory usage. Hopefully next time I have a major event with the family it will be relatively easy to get all of those images uploaded quickly.