WebView2Feedback icon indicating copy to clipboard operation
WebView2Feedback copied to clipboard

How to catch FilePicker dialogs?

Open TripleNico opened this issue 3 years ago • 17 comments

We would like to catch an event when a user opens a Filepicker dialog. For example we would like to use WebView2 in our Kiosk application. The user is able to plugin a USB drive and then get's the rights to upload a file using this HTML:

<input type="file" id="myFile" name="filename">

Now this opens up the default Win32 OpenFileDialog, giving the user access to the whole system. This isn't something we want so we want to display our own FilePicker we created (which is also touch friendly) instead of the Win32 version. With CefSharp an event get's raised when a OpenFileDialog is requested. Is there a similar event in CoreWebView2 we can use?

Already tried all the current available events but can't seem to find one for this feature.

AB#30958081

TripleNico avatar Jul 01 '21 09:07 TripleNico

Hey @TripleNico - We don't currently have the ability to do this, but it's a known feature request already on our backlog. I'll link this issue to that scenario. Thanks!

champnic avatar Jul 07 '21 22:07 champnic

Hi @champnic thanks for confirming that this isn't currently available. Saves a lot of searching ;-)

Is there a timeline when this feature will be available?

TripleNico avatar Jul 08 '21 07:07 TripleNico

@TripleNico Our backlog is quite large (see # of open issues) and we generally prioritize based on size of customer ask, so unfortunately I wouldn't expect this to be available for a while.

champnic avatar Jul 08 '21 17:07 champnic

I'm interested in this event, as implemented by CefSharp in that I would give the event the path to a file and cancel the dialog ever showing.

darbid avatar Jul 22 '21 21:07 darbid

I've been interested in this feature for a long time already. We need a way to upload files programmatically or provide our own, otherwise the file picker dialog appears and there's no way to get rid of it, except using WinAPI which isn't pretty,

darkguy2008 avatar Aug 04 '21 23:08 darkguy2008

@TripleNico Our backlog is quite large (see # of open issues) and we generally prioritize based on size of customer ask, so unfortunately I wouldn't expect this to be available for a while.

#378

amanada avatar Aug 19 '21 00:08 amanada

Hello à tous i'm interested in this feature too :-) i have created this: https://github.com/MicrosoftEdge/WebView2Feedback/issues/2650#issue-1328572085 is there any chance that this feature arrive? thank you!

TranquilleXav avatar Aug 05 '22 14:08 TranquilleXav

Hello à tous i'm interested in this feature too :-) i have created this: #2650 (comment) is there any chance that this feature arrive? thank you!

If it helps, I ended up using WinAPI to catch the FilePicker dialog, type the desired filename and press Enter. Not pretty at all, and I don't have code to share as it's from a previous employer, but you basically use FindWindow and SendMessage to do that in a separate thread, while you wait for the FilePicker to disappear or set a flag on true (ManualResetEventSlim is a good option).

Again, not pretty, but it works. Considering Chrome's CDP allows to do this, it should be no issue on the WebView2 side, they just need to provide the API and make it work and that's it.

darkguy2008 avatar Aug 05 '22 15:08 darkguy2008

@darkguy2008 Are you able to share the CDP technique you mentioned? https://chromedevtools.github.io/devtools-protocol/

You should be able to call into CDP directly through the WebView2: https://docs.microsoft.com/en-us/dotnet/api/microsoft.web.webview2.core.corewebview2.calldevtoolsprotocolmethodasync?view=webview2-dotnet-1.0.1264.42#microsoft-web-webview2-core-corewebview2-calldevtoolsprotocolmethodasync(system-string-system-string)

champnic avatar Aug 05 '22 21:08 champnic

@darkguy2008 i already use this technology. i catch the dialogbox and i secure it. but I wanted something simpler and more integrated...

I saw that there is a setting to block all dialog boxes (AllowFileSelectionDialogs) but that's not what i want...

TranquilleXav avatar Aug 22 '22 06:08 TranquilleXav

For all of those who stumble upon this issue and wonder how you can indeed do it for now, it is indeed possible to do with CDP(Chrome DevTools Protocol) You can also use the WebView2.DevToolsProtocolExtension for easier integration.

If you go this route you will need to do the following(assuming use of the dev tools extension):

  • After initializing the browser(EnsureCoreWebView2Async) you will want to get the devtools helper with var helper = CoreWebView2.GetDevToolsProtocolHelper()
  • Enable DOM and Page with helper.Page.EnableAsync() and helper.DOMEnableAsync()
  • enable Page.interceptFileChooserDialog with helper.Page.SetInterceptFileChooserDialogAsync(true)
  • listen to the helper.Page.FileChooserOpened event
  • when an event is executed, use helper.DOM.SetFileInputFilesAsync(files, null, BackendNodeId from the event arguments)

tho it seems to crash when the event call is taking too long, so if you just want to intercept some you might want to enable the interception(step 3) only when you need it and disable it later

RustyStriker avatar Dec 27 '22 13:12 RustyStriker

Hello, Any update for this feature? I've tried the RustyStriker solutions and capture the event ok. But after capture it, if I want that continue the opening of the file picker dialog... I can't find the way. Somenthing like e.Handle=true. Example:

_await this.webView.EnsureCoreWebView2Async(null); this.helper = this.webView.CoreWebView2.GetDevToolsProtocolHelper(); this.webView.CoreWebView2.Navigate(this.appURL); await helper.Page.EnableAsync(); await helper.DOM.EnableAsync(); await helper.Page.SetInterceptFileChooserDialogAsync(true); helper.Page.FileChooserOpened += Page_FileChooserOpened;

private async void Page_FileChooserOpened(object sender, Page.FileChooserOpenedEventArgs e) { if (I want to choose natural filepicker) { e.continue() } else { return; }_

Karrtojal avatar Jan 31 '23 10:01 Karrtojal

Hello all, actually, impossible to use DevToolsProtocolExtension in UWP application. I try to use CDP directly through the WebView2 like this :

var x = await this.webview.CoreWebView2.CallDevToolsProtocolMethodAsync("Page.setInterceptFileChooserDialog", "{"enabled" : true}");

But without success. @TranquilleXav it seems you re use this method with success. Can you help me ? Many thanks.

Up for this feature please, ty

FrancoisBOTTE avatar Feb 23 '23 12:02 FrancoisBOTTE

Hello @FrancoisBOTTE , i don't use CallDevToolsProtocolMethodAsync ... I haven't tried this technique yet. for the moment, i catch the dialogbox with another technology (WinAPI )... Sorry!

TranquilleXav avatar Feb 23 '23 14:02 TranquilleXav

@TranquilleXav thank for the answer. Can you describe quickly or send me an entry for your solution ? I try with CallDevToolsProtocolMethodAsync but i have too many issues with this. Ty

FrancoisBOTTE avatar Feb 23 '23 15:02 FrancoisBOTTE

i think it's not possible with UWP application, i use hooks, and resources id, and i modify property... sorry for my pauvre english :-)

TranquilleXav avatar Feb 23 '23 17:02 TranquilleXav

When can it be used?

FlirtChatX avatar May 08 '24 18:05 FlirtChatX