App
App copied to clipboard
Expensify
[$2000] Add support for copy/pasting images on iOS
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-09
Issue Owner
Current Issue Owner: @
Triggered auto assignment to Contributor-plus team member for initial proposal review - @ahmedGaber93 (External)
![melvin-bot[bot] avatar](https://avatars.githubusercontent.com/in/179547?v=4 "Published by a pub.dev verified publisher"){kind=small}
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.
:warning: 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 :warning:
Triggered auto assignment to Design team member for new feature review - @dubielzyk-expensify (NewFeature)
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)
}})
}
https://github.com/Expensify/App/assets/35566748/c89ba805-db4e-4aba-8b85-45c0a2347eb6
Note that the above code is not extensive, I had to do more changes locally to make it work.
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
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.
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?
🤔 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? 👍
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?
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?
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.
When I check the clipboard content after copying an image on iOS, it just shows the link.
@ShridharGoel Thanks for the proposal.
I think pasting the image from the URL in the clipboard seem a workaround, because when we copied the image, we click "copy image" not "copy image address", so we may need to handle the image as fileObject or base64 string.
Also, your proposal doesn't have how we will detect onPasteFile on the normal case by long click on the input then click paste.
The paste to compose bar is how most apps on iOS works. It works like this on Messages, Telegram, and Signal. So I suggest we do that. Like Shawn said, let's trigger the modal window like we do on web/mac os.
The paste to compose bar is how most apps on iOS works. It works like this on Messages, Telegram, and Signal. So I suggest we do that. Like Shawn said, let's trigger the modal window like we do on web/mac os.
Totally agree.
Yes, paste should appear on the native context menu that appears when you double-tap on the composer input.
@sonialiap, @ahmedGaber93, @roryabraham Whoops! This issue is 2 days overdue. Let's get this updated quick!
@sonialiap, @ahmedGaber93, @roryabraham Still overdue 6 days?! Let's take care of this!
@roryabraham should this issue be external or internal? Are we looking for contributors to build this or is thing something you're working on?
It should be external - not sure why it appears no upwork job has been created...
Job added to Upwork: https://www.upwork.com/jobs/~0195bbb40518505764
Current assignee @ahmedGaber93 is eligible for the External assigner, not assigning anyone new.
📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸
With our high focus on reliability over new features, this is kind of taking a back-seat. However, I'd say this is reasonably high priority still because it has a high impact on UX, particularly on iOS for P2P / chat uses.
So I'm going to bump the bounty.