[HOLD for payment 2024-11-18] [HOLD for payment 2024-08-23] [$2000] Add support for copy/pasting images on iOS

[roryabraham]

slack proposal: https://expensify.slack.com/archives/C01GTK53T8Q/p1714239125412939

Feature Request: Add support for pasting images on iOS.

Problem

One of the most common flows for sharing images on iOS is to copy the image somewhere and paste it somewhere else, and NewDot does not support that flow. For example, I wanted to share an image I found on Google in New Expensify. The first thing I did was copy the image to my clipboard, but when I long-pressed on the composer to try and paste that image, the only option available was AutoFill.
This left me with two more less desirable options:

• copy the URL to the image, then write that URL in a markdown comment with inline image syntax (this was the next thing I tried, and it actually didn't work for the URL I had)
• save the image to my photos, then upload it to New Expensify. This is less ideal because it pollutes my photos gallery with something I don't want to keep there.

This was a very basic flow that did not work very well at all, and it was a frustrating experience. It's table-stakes for any chat app.

Solution

Implement support for pasting images on iOS.

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0195bbb40518505764
• Upwork Job ID: 1790820991593271296
• Last Price Increase: 2024-07-16
• Automatic offers:
• ahmedGaber93 | Reviewer | 103152998

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @sonialiap / @stephanieelliott

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @ahmedGaber93 (External)

[melvin-bot]

Triggered auto assignment to @sonialiap (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.

[melvin-bot]

⚠️ It looks like this issue is labelled as a New Feature but not tied to any GitHub Project. Keep in mind that all new features should be tied to GitHub Projects in order to properly track external CAP software time ⚠️

[melvin-bot]

Triggered auto assignment to Design team member for new feature review - @dubielzyk-expensify (NewFeature)

[roryabraham]

I don't think we need any design review here

[ShridharGoel]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Add images copy/paste in iOS.

What is the root cause of that problem?

New feature.

What changes do you think we should make in order to solve the problem?

Add a new option "Paste image" in the + menu of chats, which will show only when there's an image copied in the clipboard.

Clicking on this option will open the attachment modal with the image.

const [imageToBePasted, setImageToBePasted] = useState('')

useEffect(() => {
    Clipboard.getString().then((data) => {
        if (/\.(jpg|png|jpeg|svg)(\?.*)?$/.test(data)) {
            setImageToBePasted(data);
        }
    });
})

Like we have displayFileInModal, we'll add displayFileInModalUsingUrl which will have url of the copied image as input.

New option in attachment picker:

if (imageToBePasted) {
    menuItems.push({
        icon: Expensicons.Paperclip,
        text: 'Paste image',
        onSelected: () => {
            if (Browser.isSafari()) {
                return;
            }
            displayFileInModalUsingUrl(imageToBePasted)
    }})
}

Screen.Recording.2024-04-30.at.12.38.36.PM.mov

Note that the above code is not extensive, I had to do more changes locally to make it work.

[dubielzyk-expensify]

Love this ticket. As for the solution, I kinda find it weird to trigger the "paste" permission on (+) click. Does this only work when you have copied a picture? What happens if you copy text?

In other apps, and even for Expensify Web and MacOS, you can paste a picture into the actual compose bar text input which to me feels more natural than to click the (+) button. Thoughts? cc @Expensify/design

[ShridharGoel]

Does this only work when you have copied a picture? What happens if you copy text?

This option would only show when we have an image URL in the clipboard.

"paste" permission

That is needed because we want to get the clipboard content.

[ShridharGoel]

you can paste a picture into the actual compose bar text input

That might not be feasible in iOS. Maybe we can modify the above shown flow instead?

[trjExpensify]

🤔 Also, what about Android to maintain cross-platform consistency given @Beamanator's recent discovery here on Rory's OG issue for this:

I did figure out that on an android device, you can go to chrome, search for an image, press & hold, and copy to the clipboard -> so shouldn't we make sure this is possible on our android app too? 👍

[shawnborton]

100% agree, I find it super bizarre to override the default + behavior here. We should definitely not do that.

Why can't you just paste into the compose box as if you were pasting text, and then that triggers the paste dialog?

[ShridharGoel]

When someone adds an image link in the input box, we can open the attachment modal with the image. But what if the user just wants to send the link itself? Should we show a modal with the option to add the image as an attachment or just keep it as a link?

[shawnborton]

Well if a link was on your clipboard, I would think you would just paste the link. But if an image was on your clipboard, then it makes sense to trigger the modal window.

[ShridharGoel]

When I check the clipboard content after copying an image on iOS, it just shows the link.

[mallenexpensify]

Paid @ishpaul777 , updated payment summary above.

@ahmedGaber93 , requested $500 refund, per the split bounty, please confirm via a comment here once you've issued it. Thx

[ahmedGaber93]

please confirm via a comment here once you've issued it. 

@mallenexpensify Done.

[mallenexpensify]

Thanks @ahmedGaber93 , confirming refund has been addressed.
@s77rt do we want a regression test from here? If not, why? Thx

[s77rt]

@mallenexpensify This is a new feature and it does require regression test.

Regression Test Proposal

1. Copy image (from Gallery or Google search results)
2. Open any report
3. Paste the image
4. Verify that an attachment modal is displayed
5. Upload the photo
6. Verify the photo is uploaded with success

[sonialiap]

Thanks Steph and Matt for handling payment while I was OOO!

Submitted Regression test to the QA team. I believe this is all done and ready to close

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.59-3 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• iOS: Clear temp pasted files #51932

If no regressions arise, payment will be issued on 2024-11-18. 🎊

For reference, here are some details about the assignees on this issue:

• @s77rt requires payment through NewDot Manual Requests
• @ahmedGaber93 requires payment automatic offer (Reviewer)

[melvin-bot]

@s77rt / @ahmedGaber93 @sonialiap / @stephanieelliott The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[s77rt]

The above PR does not require additional regression test