[Problem/Bug]: Cannot post message with file object from window.showOpenFilePicker #5357
Description
What happened?
The documentation for window.chrome.webview.postMessageWithAdditionalObjects suggests that JavaScript file objects can be posted into the WebView2 host as an additional object.
This functionality appears to work for files obtained via the HTML <input type="file" /> element, however it does not seem to support file references obtained using window.showOpenFilePicker.
When attempting to post the file as an additional object, I am facing the following error:
TypeError: Failed to execute 'postMessageWithAdditionalObjects' on 'EmbeddedBrowserWebView': Failed to post a message: additional File object is not a file on the disk.
My application relies on the user selecting files using the window.showOpenFilePicker API and I need to pass this file into the host application for further processing.
Importance
Important. My app's user experience is significantly compromised.
Runtime Channel
Stable release (WebView2 Runtime)
Runtime Version
139.0.3405.125
SDK Version
1.0.3405.78
Framework
Winforms
Operating System
Windows 11
OS Version
22631.5768
Repro steps
I am able to repro this issue using the following HTML snippet
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button>Select File | window.showOpenFilePicker</button>
<input type="file" />
<script>
document.querySelector("button").addEventListener("click", async () => {
try {
[fileHandle] = await window.showOpenFilePicker();
var file = await fileHandle.getFile();
console.log("File selected via showOpenFilePicker", file);
chrome.webview.postMessageWithAdditionalObjects("FileSelected", [file]);
}
catch (e) {
alert(e);
}
});
document.querySelector("input").addEventListener("change", async (e) => {
try {
var file = e.target.files[0];
console.log("File selected via input element", file);
chrome.webview.postMessageWithAdditionalObjects("FileSelected", [file]);
}
catch (e) {
alert(e);
}
});
</script>
</body>
</html>
Clicking the Show File Picker button and selecting a file will throw the following error when attempting to post to the WebView2 host
TypeError: Failed to execute 'postMessageWithAdditionalObjects' on 'EmbeddedBrowserWebView': Failed to post a message: additional File object is not a file on the disk.
Selecting a file via the HTML file input is able to successfully post the message to the WebView2 host where I can access the CoreWebView2File instance.
Repros in Edge Browser
No, issue does not reproduce in the corresponding Edge version
Regression
No, this never worked
Last working version (if regression)
No response