Refactor: Image upload

[benfurber]

On the user Settings page (SettingsPage), the user profile image component in UserInfosSection uses ImageInputField which in turn uses ImageInput which has a lot going on in it!

We’re looking to add a feature so that users can select a crop of the image they select but due to the current architecture, this is difficult to implement.

Task

Change ImageInputField so that it is more responsible for:

1. Determining if an image is empty and thus renders a more simple ‘Upload image’ button.
2. If the user has selected an image, present the user with the CropImage component (Feat: Add crop image component #3269).
3. If the user has selected a crop for the image, begin uploading the cropped image and thus rendering a Loader.
4. If errored, present that error to the user.
5. If successful, render the uploaded image to the user with a delete button beneath - Not an overlay, it’s bad UX for mobile.

Notes:

• This is more complex for the multi-image implementation for the multi-image implementations of the image upload feature used for workspaces, etc. Don’t worry about that for the moment, let’s get it right for single image use.
• Please move as much responsibility to the component library as possible.

[manacespereira]

Can i work on this one?

[thisislawatts]

@manacespereira it looks like @benfurber has started work on this item in #3287

[benfurber]

Hi @manacespereira. I’d be delighted for you to pick this up.

As @thisislawatts says, there’s #3287 - which doesn’t change the functionality (as this issue proposes) but was meant to be a tidy up to support this ticket. But as you can see from the failing tests, I eeerrr, must have broken something.

Early next week I can finish #3287 and get confirmed that #3269 is the direction we want to travel.

As I want to move as much functionality to the component library as possible you could probably start playing around/architecting/planning this issue now and we have a chat next week about details?

How does that sound?