Improve error message when user uploaded file is too large

Description

When a researcher is trying to create/edit a study and the study image size is too large, they get an error when trying to submit the form: 413 Request Entity Too Large. This comes from size limits in the nginx config. Ideally we would catch this error earlier and give users a more informative message.

How to reproduce

• Go to a study create or edit page
• Set the study image to an image file that is too large (> 10 MB?)
• Try to submit the form.

Expected behavior

Ideally we should catch this error earlier and give users a more informative error message, e.g. "Image file size is too large. Please limit the file to 10 MB or less". This could either happen at the point of selecting a file or when the submit button is clicked but before the request is sent.
In addition to improving error messages, we could put any file size limits in the help text for the file upload form element.

Screenshots

Additional context

We may want to look through the site to find any other instances where users can upload arbitrary files, e.g. lab page images.

Note that we do mention file size limits in the documentation for the study image here: https://lookit.readthedocs.io/en/develop/researchers-set-study-fields.html#study-image but it might be possible to improve the docs for other similar instances.

Start by reproducing the oversized study-image upload on the study create and edit pages, then review the nginx size limit and the file-upload form. Check the existing study-image documentation for the stated limit and look for other arbitrary file-upload forms such as lab page images. Done means users receive an informative size-limit message before or during submission and the relevant help text is accurate.