Loading times

[SamuelJForrest]

When a user selects an image it can take a while to load, depending on the image size.

Some potential solutions for this could be:

• Limit allowed filesize
• Compress image before converting

[SamuelJForrest]

This package may be useful - it allows you to resize the image, which you could do before saving it?

https://flask-resize.readthedocs.io/usage.html

[SamuelJForrest]

This issue has now been resolved. The comment above wasn't as useful as initially thought, as this library only resizes the images after upload, which didn't help in the reduction of upload times.

I have made the following changes to resolve this issue:

1. Compressed images on upload

In the JavaScript that handles the file upload, I converted the uploaded image into a canvas, and then a blob, and then saved that blob as a file. This new, compressed, file then replaces the old one.

It is also worth noting here that I moved this JavaScript from the {% block scripts %} section of upload.html to it's own .js file

Here is a before/after comparison of the file sizes on upload:

2. Limited the max file size users can upload

Using the app.config['MAX_CONTENT_LENGTH'] setting, I have set the max allowed file size to be 5MB. If a user attempts to upload a file > 5MB, they receive the following error message

To make users aware of this limitation, I have added text to the upload form: