Problem Summary
File input <input type="file"> click events are not opening the file selection dialog in Microsoft Edge, despite the same code working perfectly in Safari and other browsers. Drag-and-drop functionality works fine in Edge.
Environment
- Browser: Microsoft Edge (latest version)
- OS: macOS
- Framework: React 18 with Next.js
- Context: Secure context (HTTPS/localhost)
What Works
Drag and drop file selection works perfectly in Edge
Button click works perfectly in Safari and other browsers
All programmatic API calls return “success” but no dialog appears
What Doesn’t Work
Any form of programmatic file input triggering in Edge
File selection dialog never appears despite “successful” API calls
Code Example
const FileUploadComponent = () => {
const fileInputRef = useRef<HTMLInputElement>(null);
const handleClick = () => {
const fileInput = fileInputRef.current;
if (!fileInput) return;
// All of these appear to "succeed" but no dialog opens in Edge:
// Method 1: Direct click
fileInput.click(); // Returns undefined, no error
// Method 2: showPicker API
if ('showPicker' in fileInput) {
fileInput.showPicker(); // No error thrown, appears successful
}
// Method 3: Focus then click
fileInput.focus(); // Element gets focused successfully
fileInput.click(); // No error, no dialog
};
return (
<div>
<button onClick={handleClick}>Select File</button>
<input
ref={fileInputRef}
type="file"
style={{ display: 'none' }}
onChange={(e) => console.log('File selected:', e.target.files)}
/>
</div>
);
};
Debug Information
When clicking the button in Edge, console shows:
✅ File input element found
✅ showPicker() called successfully
✅ Element successfully focused
✅ click() called successfully
✅ userActivation: true (initially)
❌ No file dialog appears
❌ onChange never fires
Attempted Solutions
Tried ALL of these approaches with no success:
- Direct programmatic click:
fileInput.click() - Modern showPicker API:
fileInput.showPicker() - Focus then click:
fileInput.focus(); fileInput.click() - Mouse event dispatching:
fileInput.dispatchEvent(new MouseEvent('click')) - Label association:
<label><input type="file"></label> - Temporary visibility: Making element visible during click
- Invisible overlay: Positioning file input over button for direct user click
- Event timing: Immediate vs setTimeout approaches
Key Observations
- User activation preserved: Click handlers are called synchronously from user events
- No JavaScript errors: All API calls complete without throwing
- Element state is correct: File input is connected, not disabled, properly focused
- Security context is valid:
window.isSecureContext === true - Works in other browsers: Identical code works in Safari, Chrome, Firefox
Question
What is Microsoft Edge specifically blocking that prevents file input dialogs from opening, even when using the modern showPicker() API and proper user activation?
Is there a specific Edge security policy, CSP header, or browser setting that could be interfering with file input functionality? Are there any Edge-specific workarounds for this issue?