Mattermost-server: Paste images on input text box

[esethna]

If you're interested please comment here and come join our "Contributors" community channel on our daily build server, where you can discuss questions with community members and the Mattermost core team. For technical advice or questions, please join our "Developers" community channel.

New contributors please see our Developer's Guide.

---

Notes: Jira ticket

As of now React Native does not have support for an onPaste event from the clipboard and no way to inspect other things that are not strings in the Clipboard itself, to add this functionality it is required to build a react native library for both iOS and Android that is able to capture the paste event and trigger an event in javascript so the content that is being pasted can be handled.

One think to take into consideration is that the paste event can and should be triggered by the RCTTextInput component from react native, so perhaps an extension to that component is needed.

Difficulty: Advanced

https://github.com/mattermost/mattermost-mobile/issues/1358

[migbot]

Hi, I'd like to tackle this one.

[hanzei]

Great! Thanks @migbot :+1:

[migbot]

I'm starting with the Android changes first. The react-native PR is here: https://github.com/facebook/react-native/pull/22794

[migbot]

Update: The plan was to return the pasted content (file path for images) and its MIME type through a new onPaste prop and then, for images, pass the file path to handleUploadFiles. This works in Android but I found that on iOS there is no access to the image's file path through the UIImage extracted from the UIPasteboard. I'll continue investigating other possible solutions and comment with another update later.

[migbot]

Update: onPaste will now return a Base64 encoded string if an image is pasted. I'll wait until I get some feed back from the react-native team on the PR before creating the new handler that will be needed on the Mattermost side.

[migbot]

Update: onPaste will now return the pasted content (file path for images) and the MIME type for both Android and iOS. There are a couple of things left to do on the react-native side:

1. Add iOS unit/integration tests.
2. Investigate an issue on iOS where the first paste event for a multiline TextInput is not triggering the on-paste handler.

[hanzei]

Hey @migbot,

Just want to check how you work on this ticket is going? It seams like the PR in the react-native repo has gotten stale. Do you plan to update the PR or fix this in another way?

[migbot]

@hanzei The plan is to investigate if it is best to create a separate RN library for this and, if it's not, push on the FB folks to merge the existing PR. I'm on SET rotation so this won't happen until Q2.

[migbot]

For anyone that would like to take this, I think what needs to be done is to create a custom component that extends React Native's native text input components and then add the onPaste functionality there. Here is the Android guide and the iOS guide.

[tekminewe]

hi @hanzei i would like to take up this issue, thanks

[hanzei]

Thanks for working on this @tekminewe :+1:

[enahum]

already done