Add feature to browse computer to upload an image file instead of drag and drop

[tr414]

Description

At the moment, a user needs to drag and drop an image file into the canvas in order to begin annotating it.

In this pull request, I have added a feature that allows a user to browse their computer for an image file and upload it instead. This is done in order to improve the user experience by allowing an alternative way to add files for annotation, and make it easier to add the file without having to switch out of the browser window.

In adding the above feature, I refactored the code that handles the reading and verification of the image file into a function called "processAndDisplayImage", and this function wraps the logic for the file reading which was previously in the event listener for the drag and drop functionality.

I have also added a line "press enter to complete the polygon", as this was not intuitive to me, and may be helpful to new users.

Type of change

[ ] New feature (non-breaking change which adds functionality)

How has this change been tested, please provide a testcase or example of how you tested the change?

Upon making this change, I have ensured that it is possible to upload an image file using the form, and that the previous method of drag and drop still works.
I have also added verification to ensure that a user can't click upload if no file is selected.

Any specific deployment considerations

None that I can think of

Docs

• Docs updated? What were the changes: No changes