Suggestion: MAUI + Blazor + TeamsFX?

[wrharper-AASP]

Is your feature request related to a problem? Please describe. I stumbled upon this due to clipboard issues with multiple platforms. It looks like there is no solid answer to get images from clipboards on all the different platforms. Even text can get a little tricky.

Describe the solution you'd like It looks like MAUI is the solution to this. Can we create a way to merge TeamsFx with: https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui?view=aspnetcore-7.0&pivots=windows Not only is it a solution, but this would make Teams App development way more powerful for possibilities and compatibility.

Describe alternatives you've considered I have tried a few, but it always reverts back to the same problem. All suggestions require the clipboard be in browsers or windows. The issue is you need to copy/paste images & text regardless of the OS type or situation.

[ghost]

Thank you for contacting us! Any issue or feedback from you is quite important to us. We will do our best to fully respond to your issue as soon as possible. Sometimes additional investigations may be needed, we will usually get back to you within 2 days by adding comments to this issue. Please stay tuned.

[wrharper-AASP]

inside teams app only: navigator.clipboard.read() requires a browser document/website element to be focused, not useable when copying from an OS or another browser that isn't the Teams App.

windows only:

        [DllImport("ole32.dll")]
        static extern int OleGetClipboard([MarshalAs(UnmanagedType.IUnknown)] out object ppDataObj);
        [DllImport("ole32.dll")]
        static extern int OleGetClipboard(out IDataObject ppDataObj);
        [DllImport("ole32.dll", PreserveSig = false)]
        [return: MarshalAs(UnmanagedType.IUnknown)]
        static extern object OleGetClipboard();

bool hasimage(DataObject data)
        {
            foreach (string format in data.GetFormats())
            {
                if (format.Contains("Bitmap"))
                    return true;
            }
            return false;
        }

void somethingtotest()
{
            object unk = OleGetClipboard();
            DataObject data = new(unk);

            if (hasimage(data))
            {
                Image image = data.GetData(DataFormats.Bitmap, true) as Image;
            }
}

[wrharper-AASP]

Actually, this isn't even possible because every way for windows (even after doing DLLImports) needs a way to convert images and they all use System.Windows.Forms which you cannot load with blazor.

[wrharper-AASP]

It looks like this should have the features but there isn't any programmed in: https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.web.clipboardeventargs?view=aspnetcore-7.0 It seems to be doing pretty much nothing at this time.

[therealjohn]

@wrharper-AASP Thanks for posting. What exactly are you requesting as a feature with TeamsFx?

[wrharper-AASP]

A way to get an image from the clipboard on every OS into a Microsoft Teams App. Text can already be done.

[wrharper-AASP]

Oh, and it needs to be a base64 string since that would be the standard way to convert it from any OS to HTML

[therealjohn]

I'm still confused how MAUI ties into your suggestion.

inside teams app only: navigator.clipboard.read() requires a browser document/website element to be focused, not useable when copying from an OS or another browser that isn't the Teams App.

What are you trying to do when you mentioned "copying from an OS or another browser"?

Do you have a Teams app implementation that doesn't work? Can you share the code?

[wrharper-AASP]

All attempts don't work so far, that's the issue. I can tell you how you would change to Base64 from a Windows Form Image object which I already posted 1 way above. You can use javascript to do browser-based clipboard and that was the navigator.clipboard.read(). it is useless for what I am saying. Getting an image from the browser you are already in is kind of useless since you can already do that in other ways.

[wrharper-AASP]

To summarize, you need to get the clipboard from the operating systems, not the browsers. With blazor there seems to be no way to do it, but with your connections with TeamsFx to Teams. It may be possible since you can paste images in Teams from clipboards already.

[therealjohn]

@wrharper-AASP This sounds like a suggestion for TeamsJS (https://github.com/OfficeDev/microsoft-teams-library-js) since that already handles other device-specific APIs and is linked to the available permissions that different OS/devices require - exposed through the app manifest.

If you agree, can you move the suggestion to that repo? If I've misunderstood, let me know.

[wrharper-AASP]

JS is not Blazor's target. This is the wrong direction.

[alicialu-MSFT]

Hi @wrharper-AASP could you clarify if you are trying to copy information into a Teams app? Or copy information from a Teams app into an external browser?

[wrharper-AASP]

I'm just saying Teams already has a way to do this somehow so it should be possible to mimic it. If you copy an image from anywhere and do ctrl+v in a chat or use the snipping tool, you see the image in it, and it can be sent without issue. I'm not sure if it is possible to do it the exact same way, maybe not. Just one idea on how to go about getting a "quicker" solution.

[wrharper-AASP]

Also, it can't be done in JS because it can only see the browser with navigator.clipboard.read() from what I have been reading. It cannot detect OS clipboard information.

[therealjohn]

JS is not Blazor's target. This is the wrong direction.

The only way to interact with the Teams client (host) is through the JS SDK. But I might be getting ahead of myself - where the functionality ends up could be different than my guess, but the functionality you want seems most relevant to the JS SDK today.

Blazor apps could build on top of any JS APIs, similar to what we do today with the Teams JS library.

Can you post a few bullet points on the user experience you want? I'm imagining this:

1. User copies an image from somewhere on their OS (Windows, Mac, iOS, Android)
2. User goes to Teams and is in your Tab app
3. User selects a button or some other UI to trigger some code in your Tab app
4. The code needs to get the image from the clipboard on that OS

Is that accurate?

[wrharper-AASP]

JS is not Blazor's target. This is the wrong direction.

The only way to interact with the Teams client (host) is through the JS SDK. But I might be getting ahead of myself - where the functionality ends up could be different than my guess, but the functionality you want seems most relevant to the JS SDK today.

Blazor apps could build on top of any JS APIs, similar to what we do today with the Teams JS library.

Can you post a few bullet points on the user experience you want? I'm imagining this:

1. User copies an image from somewhere on their OS (Windows, Mac, iOS, Android)
2. User goes to Teams and is in your Tab app
3. User selects a button or some other UI to trigger some code in your Tab app
4. The code needs to get the image from the clipboard on that OS

Is that accurate?

You got it!