I have an application I use to share pictures with my family and friends. The new web user interface is written in React and contains an upload feature. The upload feature generates an image preview, a SHA256 sum, checks via the sum if the image has been uploaded already, then does so if useful. These all include image state transitions.

This procedure works extremely well if you are uploading up to 24 images when connected via a WLAN to the service. However this becomes worse when doing so remotely. Phones also consume a large number of resources via the preview, SHA calculation, and of course the upload. At one point I was able to crash Chrome by uploading 100 images.

Since FileReader#readAsDataURL will buffer an entire file into memory I think I can make a gain by removing the preview. This would occur either after upload has completed or when the service tells us the image has already been uploaded. Thus we would be able to utilize the caching and rendering mechanisms to better utilize resources. Hopefully I am not being over optimistic there.

Next up is the computational portion. There are two approaches I am thinking about using. The first is to place a hard limit on the number concurrent operations at each step of the process related to the number of cores available. For example on a Nexus 6 with 4 cores I am only calculating 4 SHA hashes. This can be obtained from window.navigator which would be awesome, and I may always default to two.

File objects may be passed to WebWorkers so I think this is worth a shot at some future point.