Add Modal Previews when Uploading Attachments + Copy/Paste files

[marcaaron]

cc @thienlnam since most of the original code is yours just reorganized a little

Summary of Changes

• Refactored attachment preview logic so the modal can be used both before and after a file is uploaded
• Separated the "thumbnail" image from the ThumbnailWithModal component so that we can launch the preview modal without requiring a thumbnail to be displayed at all
• Exposed modal launching methods via render prop so we can open image previews regardless of UI trigger
• Added the ability to paste a file into the text input and launch the preview modal

TODO

• Handle previews for non image attachments

Fixed Issues

Fixes https://github.com/Expensify/Expensify/issues/143636

Tests (All platforms)

1. Upload an attachment via the paperclip icon
2. Verify you see a preview modal with an "upload" button
3. Tap the button
4. Verify it starts uploading and succeeds

Web / Desktop only tests

1. Copy and paste an image file into the text input for a chat (does not work with non-image files)
2. Verify you see a preview modal with an "upload" button
3. Tap the button
4. Verify it starts uploading and succeeds

Screenshots

iOS

Android

Web

[marcaaron]

Throwing a hold on this as I think maybe we want to make sure that previewing attachments works before implementing this.

[marcaaron]

Still working out how to handle non image attachments, but made some progress here.

[marcaaron]

Got something like this so far if you want to poke around @shawnborton

[shawnborton]

Nice, that should be plenty to get started.

[marcaaron]

Gonna take this off hold so we can start getting some thoughts. There are a lot of changes but mostly it's copy and paste from files being renamed / reorganized. Would like to get this merged sooner than later as the conflicts are particularly painful to handle.

@shawnborton are you cool with doing a styling follow up for this so we can get a first draft merged and then focus on the non image/pdf attachment previews?

[roryabraham]

Just curious, do you know why this was wrapped with a React.Fragment before?

[marcaaron]

I think was enabling us to use the short circuit syntax as a curly brace after the => would have opened a new block and required an explicit return.

[roryabraham]

Overall I think this is much better than it was before. There were a few pieces that were pretty hard to wrap my head around, but each time I tried to find a way to simplify things or make them clearer I ended up realizing why you did it the way you did and couldn't come up with a cleaner way to do it. It seems to work pretty well, but I'm not approving just yet because I need to do more testing.

[roryabraham]

Okay, this looks good to me and seems to work well.

[thienlnam]

Nice! This tests well, and the images are super snappy

[mananjadhav]

I am tagging this PR to highlight an issue fixed here. All conditions in ternary expressions or left-hand operands on conditional renders, should be boolean. This PR is one of the PRs that uses conditional render with string operands, hence I am tagging it here for the contributors to check.

We've also updated the item in the checklist with this PR to avoid this issues in the future.