File chooser dialog can only be shown with a user activation.

[phoducgiang]

I have to embedded cefsharp to my winforms tools. However i cannot run the js script for click to show dialog box then choose the file for upload. Cefsharp always show the log "File chooser dialog can only be shown with a user activation.", please advise me how to fix this issue.

Here is my js script:
function performClick(elemId) { var elem = document.getElementsByName(elemId)[0]; if(elem && document.createEvent) { var evt = document.createEvent("MouseEvents"); evt.initEvent("click", true, false); elem.dispatchEvent(evt); } } performClick("tabSearch$TabPanel1$fileSearchTemplate");

[amaitland]

For security reasons you cannot trigger a file dialog through JavaScript without user action. You can focus the button and send through an enter key press.

https://stackoverflow.com/questions/44736904/issue-with-cefsharp-browser-sendkeys

[ukandrewc]

I had been working on something similar and can confirm that using DevTools Protocol DOM.SetFileInputFiles does work.

This is using a DOM wrapper in VB, so you'll need to adapt it.

'Get File Input
Dim Elm = CSView.document.evaluate("//input[@type='file']")
'Visual check
Elm.style("background") = "red"
'Get location to find backendNodeId
Dim Rec = Elm.getBoundingClientRect
Dim Res = Await CSView.DevTools.DOM.GetNodeForLocationAsync(Rec.X, Rec.Y)
Dim Inp = Await CSView.DevTools.DOM.SetFileInputFilesAsync({"c:\myfolder\myfile.pdf"}, backendNodeId:=Res.BackendNodeId)
Elm.nextElementSibling.click()

[phoducgiang]

@amaitland can you shown about getBoundingClientRect with winform ?
@ukandrewc i wil try it

[amaitland]

can you shown about getBoundingClientRect with winform ?

Personally this is not the approach I would choose.

A super simple example looks like this:

using (var devTools = browser.GetDevToolsClient())
{
	//Get Document
	var document = await devTools.DOM.GetDocumentAsync();

	//Get the NodeId for our File Upload element based on it's element Id
	var inputFileNode = await devTools.DOM.QuerySelectorAsync(document.Root.NodeId, "#myFile");
	//Upload a file
	var setFileInputResponse = await devTools.DOM.SetFileInputFilesAsync(new string[] { @"C:\Windows\win.ini" }, inputFileNode.NodeId);
}

An example of uploading a file to https://www.w3schools.com/howto/tryit.asp?filename=tryhow_html_file_upload_button which uses an Iframe looks like:

using (var devTools = browser.GetDevToolsClient())
{
	//Get Document
	var document = await devTools.DOM.GetDocumentAsync();

	//Find our iFrame
	var iFrameNode = await devTools.DOM.QuerySelectorAsync(document.Root.NodeId, "#iframeResult");
	//Get more detail of around iFrame
	var iFrameNodeDetail = await devTools.DOM.DescribeNodeAsync(iFrameNode.NodeId, depth: -1, pierce: true);
	//Get the NodeId for the BackendNodeId
	var convertedNodeIds = await devTools.DOM.PushNodesByBackendIdsToFrontendAsync(new[] { iFrameNodeDetail.Node.ContentDocument.BackendNodeId });
	
	//Get the input element Node Id based on it's element Id
	var inputFileNode = await devTools.DOM.QuerySelectorAsync(convertedNodeIds.NodeIds[0], "#myFile");

	//Upload file
	var setFileInputResponse = await devTools.DOM.SetFileInputFilesAsync(new string[] { @"C:\Windows\win.ini" }, inputFileNode.NodeId);
}

How you get the NodeId for the input element depends on your HTML. You should be able to use the query selector synatx with something like input[name='tabSearch$TabPanel1$fileSearchTemplate']

var inputFileNode = await devTools.DOM.QuerySelectorAsync(document.Root.NodeId, "input[name='tabSearch$TabPanel1$fileSearchTemplate']");

I've not tested your the last part. You should read https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

[phoducgiang]

@amaitland I don't know why when I tried your example code with my case, the exception showed as attached image. However when I using devtools for queryselector, I got this Node Id.

[amaitland]

Please no images of exceptions, use the copy details button and provide the error as text in future.

You'll need to update the QuerySelectorAsync to find the DOM node for particular site.

Read https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

You can use the DevTools console to test out your query.