Uploading a large image to a post on a deployment

[Erioldoesdesign]

Describe the bug
When a post has the ability for a photo/image to be uploaded. If the image is over 66kb (only tested on 66KB image and a 1.3MB image) the image will appear in the draft or in the 'non-published' post but then when you try to save it will not display.

I get a very quick 'snackbar' appear with a triangle ! icon and no supporting text. If I don't see that an image failed I have no information to fix my error/image upload.

Where was the bug observed
https://isooko.ushahidi.io

To Reproduce
Steps to reproduce the behavior:

1. As a logged in role with permissions to post to a survey or edit a survey, go to a post that can have an image uploaded to it.
2. Click the + add photo button
3. Choose and image over 66KB
4. Save the post
5. See error message. There is also a 'dismiss' snack bar that appears out of context (it flashes for a split second)

Expected behavior
I would expect the

Is there a workaround? What is it.

1. I would love some copy that is next to all '+ ADD PHOTO' buttons that explains to users the maximum recommended file size for a photo/image.

2. Some text to go along with the error like 'The image you selected didn't upload correctly. Try a smaller image/photo that is under 'X'KB in file size.'

Screenshots

URL / Environment where this happened
Live

If the bug is datasource related (e.g. SMS or Targeted SMS), please specify the configuration details (e.g. Frontline + Clickatell, etc):

Desktop Hardware Details (please complete the following information):

• OS: Mac Mojave 10.14.5
• Browser Chrome Version 77.0.3865.90 (Official Build) (64-bit)

Smartphone Hardware Details (please complete the following information):
N/A

Additional context
N/A

[rowasc]

Related to #939 :(

Removed size tag. This may require backend changes to expose new values.

[Angamanga]

I have started this work in ushahidi/platform-client#1382 but the following changes are needed to make the whole process more clear:

1. Move the deletion of an image to the final save. Right now, if someone deletes an image and then decides to not save, the image is gone.
2. Display the correct width of the image if it fits in the window. Right now images that are small becomes magnified and gets pixly
3. Consider moving validation to media-service instead
4. Consider changing the whole model, and get the image in the post-edit directive instead of in the media file. There is no point using the mediaId to check if a file is there or not, since we don't get the id until the image is saved? It just makes it extra complicated? Alternatively, save the image upon upload. But then, if someone does NOT save the image, we have an extra image without a post... Need to discuss this, possibly pairprogram @rowasc ?

[rowasc]

I just tested the initial commit with size validation and required, and it works really nicely <3 You rock @Angamanga
Will try the latest "delete image" PR now too

Edit: sent a tiny feedback on the PR

[rowasc]

re 4 - I can pair later in the week totally