Drag and drop OS files into Webview

[matthewjamesadam]

I have a custom view (Webview) in a sidebar (WebviewView). I'd like the custom view to be able to handle drag and drop events, specifically file drag and drop (from the OS, ie file explorer).

I've implemented the standard HTML5 events, but these only seem to work when holding down shift. I'm curious if this is intentional or not -- it makes the functionality effectively impossible to discover.

Are there any alternatives to this?

[KaloudasDev]

Hello! The shift-key requirement for OS file drag and drop into webviews is indeed a security limitation in VS Code. Here are several effective alternatives:

Option 1: File Input with Custom Styling
Create a visually appealing drop zone that's actually a file input:

<label class="drop-zone">
    <input type="file" multiple style="display: none;" id="fileInput">
    <div>Drop files here or click to browse</div>
</label>

<script>
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', (e) => {
    const files = Array.from(e.target.files);
    files.forEach(file => handleFile(file));
});
</script>

Option 2: Enhanced Drag Detection with User Guidance

document.addEventListener('dragover', (e) => {
    e.preventDefault();
    if (e.dataTransfer.types.includes('Files')) {
        showShiftHint();
    }
});

document.addEventListener('drop', (e) => {
    e.preventDefault();
    if (!e.shiftKey) {
        showShiftRequiredMessage();
        return;
    }
    const files = Array.from(e.dataTransfer.files);
    handleFiles(files);
});

Option 3: VS Code Native File Dialog
Use VS Code's native file picker as a reliable alternative:

const uris = await vscode.window.showOpenDialog({
    canSelectMany: true,
    openLabel: 'Select Files',
    filters: { 'All Files': ['*'] }
});

if (uris) {
    webview.postMessage({ 
        type: 'filesSelected', 
        files: uris.map(uri => uri.fsPath) 
    });
}

Option 4: Mixed Approach with Clear UX
Combine methods with clear user guidance:

• Primary: Prominent "Browse Files" button using native dialog
• Secondary: Drop zone with clear "Hold Shift to drop files" instruction
• Fallback: Copy-paste file path functionality

The shift-key requirement is intentional for security, so designing around this limitation with clear user interfaces will provide the best experience for your extension users.