App fails silently for larger image file sizes

[pklaschka]

Describe the bug
The app fails silently when file sizes exceed the capacity of the localStorage. The limit is different for different Browsers, on Chrome, the cutoff seems to be at around 3.2 MB.

To Reproduce
Steps to reproduce the behavior:

1. Go to fliegwerk.github.io/simple-timer/
2. Upload a large GIF file (>= 3.7 MB)
3. Watch as nothing happens

Expected behavior
The image should get used or an error message shown.

Screenshots
Console output:

Desktop (please complete the following information):

• OS: independent
• Browser independent
• Version independent

Additional context
As reported by (thank you to) Prof. Dr. Sergio Montenegro

[pklaschka]

Possible approaches:

• surround with try/catch and show an unspecific error message about too-large file size when storing in localStorage fails
• encode the stored data more efficiently. To save the path and DataURI, we don't need the full UTF-8 charset, meaning we could potentially save images more efficiently
• use a different system for storing the image, e.g., IndexedDB (further research is required to determine if that would help). The thing is that we aren't reaching a file size limit, just the character limit for the localStorage entry.
• Chunk the image storage into a fixed number of chunks, avoiding exceeding the character limit per entry. In this case, larger images could still be "too large," meaning we'll have to handle a potential error case.

[pklaschka]

I think the best way to go is the following:

onSave: Split the image data into - say - 10 chunks. try to store the chunks as keys image-1 through image-10 in localStorage. On error (catch, still call setState!), show a message (for now, via window.alert()) stating that the image couldn't be saved due to its file size and will therefore not persist through sessions.

[pklaschka]

Fixed as of v0.4.3