[$250] [Image] Implement the ability to copy images to the clipboard

[roryabraham]

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

---

Coming from #3313

Action Performed:

Right-click or long-press on an image in a chat.

Expected Result:

1. A context menu appears, displaying a single option: Copy image to clipboard
2. Clicking on this option should copy the image to the clipboard, where it can be pasted somewhere else.

Note: the solution implemented must be an offline-first solution. Meaning the user should be able to copy the image to their clipboard, whether or not they have internet connection.

Actual Result:

1. The normal context menu appears.
2. Clicking on Copy to clipboard copies the HTML image tag to the clipboard, not the binary image itself.

Workaround:

Screenshot the image? Also you can click on it and download it.

Platform:

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

Version Number: 1.0.85-3
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation
Expensify/Expensify Issue URL:

Upwork job: https://www.upwork.com/jobs/~012fd9a807faaf42aa
View all open jobs on Upwork

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01b3973ec74ce159e9
• Upwork Job ID: 1782953316490067968
• Last Price Increase: 2024-05-01

[roryabraham]

Okay, there was a fair deal of discussion over in #3313 and other issues, but the task at hand here is to:

1. (internal) Create an Expensify/ fork of https://github.com/react-native-clipboard/clipboard
2. Create a separate fork of https://github.com/react-native-clipboard/clipboard for local testing.
3. Provide a complete implementation of this issue in your separate fork.
4. Point this project and your fork for local testing.
5. Add a new context menu type for images, display it when images are right-clicked or long-pressed. This PR might serve as a useful guide.
6. Once that's working, submit a PR from your fork of react-native-clipboard to the Expensify/react-native-clipboard fork.
7. Also submit a PR from your fork of react-native-clipboard to the upstream project.
8. Create a PR in this repo with your implementation from step 5 above, but point the project at the Expensify/react-native-clipboard fork instead of your personal one. (should be on HOLD until the PR from step 6 is merged.
9. Lastly, if/when your PR from step 7 is merged by the project maintainers, create another PR to point this repo at the upstream repo: https://github.com/react-native-clipboard/clipboard

[roryabraham]

No Upwork job created for this yet.

[Drewfergusson]

@puneetlath things have gotten quite a bit busier for me lately so I'm going to have to pass.

[MelvinBot]

@puneetlath, @roryabraham Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[roryabraham]

No new proposals here

[MelvinBot]

@puneetlath, @roryabraham Whoops! This issue is 2 days overdue. Let's get this updated quick!

[MelvinBot]

@puneetlath, @roryabraham it looks like no one is assigned to work on this job.
Please double the price or add a comment stating why the job isn't being doubled.

[MTN718]

Proposal

Currently used setString function for copy to clipboard for attachement

And when paste, it is not parsing content correctly in handlePaste for textinput

embeddedImages length always showing 0

Reason: setString to clipboard making extra span tag image element converted to string

To fix issue

• Get image element text from clipboard
  

• Convert it to html tag from string
  

• Attached Working Video

Screen.Recording.2021-08-24.at.5.42.13.PM.mov

Please review and give me feedback @roryabraham , @puneetlath

[roryabraham]

@MTN718

Reason: setString to clipboard making extra span tag image element converted to string

Sorry, I'm having difficulty understanding this. Can you help me understand this better?

---

Other than that, there are two main concerns I have with your proposal:

1. Keep in mind that this is a react-native codebase, so we need a solution that works not only on web, but also on iOS and Android. Ideally, we would create a solution that works for both iOS/Android and react-native-web, so that we don't need two separate implementations. See the following resources:
   • Expensify/App Philosophy, particularly section 5 titled "Cross Platform 99.9999%"
   • Image support react-native-clipboard/clipboard#6
   • [$250] [Image] Implement the ability to copy images to the clipboard #4629 (comment)
2. Also, can you verify with your existing solution that the image binary is copied to the clipboard such that it can be pasted into another program, such as Notes, Google Docs, or Microsoft Word?

[anboia]

Proposal

---

Use native share workflow for mobile (with react-native-share ), and keep web/desktop version with the "Copy to Clipboard" Context menu.

---

Explanation:
UX is increased, by having more options: with just one step users can copy the content, or send it to other apps like WhatsApp, Slack, Note (or any other workflow they prefer)

---

Solution

Create a <Sharable/> component, similar to <PressableWithSecondaryInteraction/>, that instead of showing the context menu, it would show the native ios/android share menu. This is the same behavior that slack takes when long-pressing a link for example:

This is how it would look like in android and ios:

[roryabraham]

@anboia That is an interesting alternate solution, I love it!

That said, I think it should really be a separate context menu option. I recommend that you create a separate issue in this repo to propose adding a share option to the context menu using the native share menu, and we can discuss over there. Plus, if we decide to move forward with this new feature, there's an additional bonus we pay to contributors if you open an issue and also implement the solution. 🤑

[MTN718]

Found solution for web version.

Screen.Recording.2021-08-25.at.3.53.29.AM.mov

Read image blob data from url and make clipboard item and write to clipboard
Used clipboard.write instead of setString
One Notice: Image url should be png file. clipboard support only image/png type. can't save jpg file to clipboard
So we should be discuss about convert image jpg to png from server or frontend.

Screen.Recording.2021-08-25.at.5.23.05.AM.mov

[MTN718]

@roryabraham one question, currently how to open context menu in the ios? long press on image is working?

[MTN718]

It's mobile web version

Screen.Recording.2021-08-25.at.4.04.24.AM.mov

[Beamanator]

Hmm I've been treating this as a monthly priority :/ 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? 👍

[trjExpensify]

That would make sense to me.

[Beamanator]

Cool so how about we open this back up for proposals! 🚀

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01b3973ec74ce159e9

[trjExpensify]

Done!

[melvin-bot]

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

[trjExpensify]

Awaiting proposals.

[trjExpensify]

@roryabraham are you going to close this in favour of #41239 or something? 😕

[Beamanator]

I'm fine with moving this to that new issue as long as we align on the desired outcome 👍

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot]

@Beamanator, @trjExpensify, @c3024 Whoops! This issue is 2 days overdue. Let's get this updated quick!

[Beamanator]

There's a decent amount of activity in #41239 so I'm going to close this one for that one