Skip to content

Add getPathForFile API for drag-and-drop file path access#4

Draft
Copilot wants to merge 5 commits intowebview2from
copilot/add-drag-file-path-support
Draft

Add getPathForFile API for drag-and-drop file path access#4
Copilot wants to merge 5 commits intowebview2from
copilot/add-drag-file-path-support

Conversation

Copy link

Copilot AI commented Nov 27, 2025 •
edited
Loading

Implements file path access from drag-and-drop events, similar to Electron's webUtils.getPathForFile(). Addresses #issue for accessing native file paths when users drop files onto the webview.

Changes

WebView2 (Windows)

  • Hooks WebMessageReceived to extract file paths via ICoreWebView2File::get_Path
  • JS calls postMessageWithAdditionalObjects on drop to pass File objects to native

WKWebView (macOS)

  • Subclass registers for NSPasteboardTypeFileURL drag types
  • Captures file URLs in performDragOperation:, sends paths via message handler
  • Validates file URL scheme before extraction

WebKitGTK (Linux)

  • Sets up GTK drag destination with text/uri-list target
  • Handles drag-data-received signal, converts URIs via g_filename_from_uri

TypeScript API

  • Adds getPathForFile(file: File): string to DeskGapInBrowser class

Usage

dropZone.ondrop = (event) => {
    event.preventDefault();
    for (const file of event.dataTransfer.files) {
        const path = window.deskgap.getPathForFile(file);
        console.log(path); // e.g., "C:\Users\...\file.txt" or "/Users/.../file.txt"
    }
};

Note: Trident/WinRT engines return empty string (no File API support).

Original prompt

This section details on the original issue you should resolve

<issue_title>Can you support access to get drag file path, it very useful</issue_title>
<issue_description>like electron

<div id="main">
  drop file to here
</div>

<script>
  var main = document.getElementById('main');
  main.ondragover = function () {
    return false;
  };
  main.ondragleave = main.ondragend = function () {
    return false;
  };
  main.ondrop = function (e) {
    e.preventDefault();
    var file = e.dataTransfer.files[0];
    console.log('filePath：', file.path);
    return false;
  };
</script>

```</issue_description>

<agent_instructions>Refer webview2 via MicrosoftEdge/WebView2Feedback#2313

Also should work for webkit(mac) gtk(linux).
</agent_instructions>

## Comments on the Issue (you are @copilot in this section)

<comments>
<comment_new><author>@ci010</author><body>
Will do POC for webview2 via https://github.com/MicrosoftEdge/WebView2Feedback/issues/2313

If you know the related API of webkit(mac) gtk(linux), please let me know.</body></comment_new>
</comments>

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

Copilot AI and others added 4 commits November 27, 2025 13:45
@ci010
Add getPathForFile API for drag-and-drop file path access
265e5c9 
Implement file path access from drag-and-drop events, similar to Electron's
webUtils.getPathForFile(). Supports:
- WebView2 (Windows): Uses ICoreWebView2File interface
- WKWebView (macOS): Tracks dropped files via NSPasteboard
- WebKitGTK (Linux): Uses GTK drag-data-received signal

Co-authored-by: ci010 <8425057+ci010@users.noreply.github.com>
@ci010
Address code review feedback
5747212 
- Add file URL scheme validation on macOS for security
- Improve WebView2 message handling to avoid passing file drops to onStringMessage
- Add comments for unused parameters in GTK implementation
- Clarify Trident stub implementation

Co-authored-by: ci010 <8425057+ci010@users.noreply.github.com>
@ci010
Remove unintended files and update .gitignore
96d0bae 
Co-authored-by: ci010 <8425057+ci010@users.noreply.github.com>
@ci010
Restore package-lock.json
225eb96 
Co-authored-by: ci010 <8425057+ci010@users.noreply.github.com>
Copilot AI changed the title [WIP] Add support for getting drag file path Add getPathForFile API for drag-and-drop file path access Nov 27, 2025
Copilot AI requested a review from ci010 November 27, 2025 13:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ci010 ci010 Awaiting requested review from ci010

Assignees

@ci010 ci010

Copilot code review Copilot

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Can you support access to get drag file path, it very useful

2 participants

@ci010