[HOLD for payment June 29] Update compose box to send photos and text in one message

[kadiealexander]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Expected Result:

1. When uploading image attachments in Expensify.cash, the existing attachment preview modal should appear. Instead of saying "Upload", it should now say "Send".

This should work the same for all three modes of interaction:
- Manually picking an image using the AttachmentPicker,
- Drag-and-dropping a photo into the ReportActionCompose,
- Pasting a photo into the ReportActionCompose from the platform's native clipboard.

2. After hitting "Send", any draft text in the composition box should be sent, followed by the attached image below the text.

@mallenexpensify @shawnborton if you have nothing else to add here then feel free to apply the External label so we can get this on Upwork.

Actual Result:

• Image uploads and text in compose box persists.

Action Performed:

Web/Desktop

• Type text in compose box
• Drag/drop image to compose box to upload
• Click 'Upload`

Mobile web/app

• Type text in compose box
• Tap attachment/paperclip icon
• Tap Photo Library or Choose from Gallery
• Select photo and tap Choose or Upload to upload

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number:
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL: https://github.com/Expensify/Expensify/issues/156214
Platform - version: All

Notes/Photos/Videos:
Big ol' thread in Slack - link
iOS/Messenger is what we're wanting to mimic

Slack does a good job of handling this but they put they post the text above the image.

[kadiealexander]

Upwork post: https://www.upwork.com/jobs/~01f6625d382eb3f5db

[johndev0711]

Hello, @kadiealexander. How are you?
I have a good solution about this issue which can solve simply and perfectly. I've ever implemented it on past projects before.
Likewise, I'd love to build a customized component for this feature.
The solution is as follows:

1. Create a composed box which contain drop box and text box.(text box is exist currently).
2. The drop box is displayed when there is any attachment the user want. And the user select the file, it places on the drop box. If there isn't any attachment, the drop box would be hidden.
3. When the user clicks the send button, the data of the composed box will be sent together to the target.

What do you think?
Looking forward to hearing from you soon.

[JmillsExpensify]

Hi @johndev0711 apologies for the delay on this one! We're going to take this issue back into an internal planning stage so that we can get more crisp on details. We'll be sure to update this issue in the near future with crisp details on next steps. Thank you!

[johndev0711]

Thanks for your info.

[roryabraham]

@kadiealexander I see that the old Upwork listing for this issue has been closed. Can you create a new one please so we can push this issue along? As soon as you have the new Upwork posting, please:

1. Update the E/E tracking issue
2. Update the OP of this issue with the new Upwork posting
3. Take this issue off hold

Then we can start taking contributor proposals for this!

[mallenexpensify]

I'm going to assign the External label because a) it hasn't been yet and b) because Rory updated the OP so all the details are there for the post.