social sharing - photo upload
the social sharing page available at https://onerelief-staging-pwa.herokuapp.com/donations/<donation id>/share
needs to be extended.
as well as choosing predefined images to share on social media, the donor should be able to upload a photo of themselves to generate two new custom images that they can then use to share the campaign.
the photo they upload should be cropped using the cropping function
the existing UI should be further developed to include essentially 4 choices of image to share, similar to here. however there will be a separate upload your own photo button which will open a file dialog to select a photo. after the photo is uploaded, the UI is updated with the photo + overlay in the two custom share images. if the user is unhappy with the photo, the user shall be able to click on the button again and upload a different photo. selecting any of the four share images performs the same action: the share buttons are updated in place, as currently happens for the two predefined share images.
the generated images (photo + overlay) need to be stored in s3, by calling the rest-api upload endpoint this should be done concurrently for the two generated photos. for this task it's not important to consider that the donor may upload multiple photos, with only one potentially being used. if the donor has uploaded a photo, the generated urls can be stored locally in the browser (eg local storage), so that the share buttons can be updated correctly when the donor clicks on different share images (this action is performed server side). refreshing the page should clear the local storage.