0

I am using WebView2 in a C# windows application and I want to be able to upload screen captures. I capture the screen and save it to a file (jpg) on the local hard drive. I want to attach this file (upload) it to the FILEUPLOAD control on a web page being displayed on a windows form using WebView2.

I was using CEFSHARP browser and was using DOM to upload the file before we switched to WebView2.

CEFSHAPRP had the DOM objects wrapped in the browser control so it was very easy to use this code :

 if (client == null)
            {
                client = browser.GetDevToolsClient();
                dom = client.DOM.GetDocumentAsync();
            }

            await Task.Run(async () =>
             {
                 QuerySelectorResponse querySelectorResponse = await client.DOM.QuerySelectorAsync(dom.Result.Root.NodeId, "#fileupload");
                 _ = client.DOM.SetFileInputFilesAsync(new string[] { filename }, querySelectorResponse.NodeId);
             });

I do not see anything like this built into the WebView2 control. I did see that WebView has another nuget called WebView2.DOM but it requires me to convert my entire project from .NET framework 4.7.2 to .netCore.

Any help would be greatly appreciated. I am very new to WebView2 and cannot see how I can access the DOM to make this happen. I am using .net framework 4.7.2

******* June 17 Update *****

I installed the Microsoft.Web.WebView2.DevToolsProtocolExtension and tried to use the existing framework I already had working with CEFSHARP.

DevToolsProtocolHelper helper = webView21.CoreWebView2.GetDevToolsProtocolHelper();
                Task<DOM.Node> t = helper.DOM.GetDocumentAsync(-1,false);

                
                await Task.Run(async () =>
                 {
                     var querySelectorResponse = await helper.DOM.QuerySelectorAsync(t.Result.NodeId, "#fileupload");
                     _ = helper.DOM.SetFileInputFilesAsync(new string[] { filename }, querySelectorResponse);
                 });

It gives me the following error when I try to execute the line :

var querySelectorResponse = await helper.DOM.QuerySelectorAsync(t.Result.NodeId, "#fileupload");

Unable to cast COM object of type 'System.__ComObject' to interface type 'Microsoft.Web.WebView2.Core.Raw.ICoreWebView2'. This operation failed because the QueryInterface call on the COM component for the interface with IID '{76ECEACB-0462-4D94-AC83-423A6793775E}' failed due to the following error: No such interface supported (Exception from HRESULT: 0x80004002 (E_NOINTERFACE)).

Any ideas. Thank you for all the advice and help I have received already.

Chris Dunlop
  • 135
  • 1
  • 13
  • Related (possibly a duplicate): [WebView2 (2020/06) -> Where's the DOM?](https://stackoverflow.com/q/62328943/8967612) One of the answers links to [this GitHub project](https://github.com/ukandrewc/Webview2.Winforms.DOM) and I've also found [another one](https://github.com/R2D221/WebView2.DOM). I haven't tested them myself though. – 41686d6564 stands w. Palestine Jun 06 '21 at 17:33
  • I looked at all of these and non of them specifically talk about fileuploads. I am able to DRAG and DROP files into my page and the files are added to the file list of files to upload. I want to automate this process using WebView2 and Either Javascript or DOM like I did with CEFSHARP – Chris Dunlop Jun 06 '21 at 19:29
  • I'm aware that they're not related to the fileupload control. But since you said _"I was using CEFSHARP browser and was using DOM to upload the file before we switched to WebView2"_ and _"I am very new to WebView2 and cannot see how I can access the DOM"_, I assumed that solutions that provide a way to access the DOM via WebView2 would be sufficient. No? – 41686d6564 stands w. Palestine Jun 06 '21 at 19:32
  • I don't think it's possible, because of security. After all, it's a browser and you don't want your browser to automatically upload files. Why don't you try a `HttpClient` ? – Poul Bak Jun 06 '21 at 21:59
  • Please remove the CefSharp tag, you aren't having problems using CefSharp. Thanks. – amaitland Jun 06 '21 at 23:51
  • 1
    @PoulBak I am not sure I can agree. Neither WebView2 nor CEF or CEFSharp are browsers. A developer uses these frameworks to create a browser. Further I personally believe (and I know many will disagree) that as non of them are browsers they should leave the security questions to the actual developer/user of these frameworks. – darbid Jun 09 '21 at 20:29
  • @ChrisDunlop did you find a solution ? I've the same problem – Fabske Nov 08 '21 at 23:39

1 Answers1

0

I believe there would be three ways to do this;

  1. Get the screen co-ordinates of the button, and then using send keys send an enter key to open the dialog. Then (currently webview2 cannot intercept this dialog like CefSharp) you would need to use the WinAPI to manipulate the file dialog window.

I have used 1 before. It is a little unreliable with the send keys and in waiting for the dialog to appear and then getting the timing right with the dialog.

  1. Using javascript you should be able to add to the filelist files and then add them to the element. I have not tried this with Webview2.

  2. Finally, and the one you already know can be used. In your question here you use DOM.SetFileInputFilesAsync which as amaitland pointed out comes from the chrome devtools protocol.. WebView2 also supports the Chrome Devtools protocols so you can effectively use the same code you already know.

darbid
  • 2,545
  • 23
  • 55