HTML <input type='file'> Not Working with Drag-and-Drop on Edge 110
I keep running into I'm refactoring my project and I am trying to implement a drag-and-drop file upload feature using an `<input type='file'>` element, and it works fine in Chrome and Firefox. However, when I test it on Microsoft Edge 110, the drop event seems to be ignored, and I receive no error messages. The following is a simplified version of my implementation: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>File Upload</title> </head> <body> <div id="drop-zone" style="border: 2px dashed #ccc; padding: 20px; text-align: center;"> Drag and drop files here or click to upload <input type="file" id="file-input" style="display: none;" multiple /> </div> <script> const dropZone = document.getElementById('drop-zone'); const fileInput = document.getElementById('file-input'); dropZone.addEventListener('click', () => { fileInput.click(); }); dropZone.addEventListener('dragover', (e) => { e.preventDefault(); dropZone.style.borderColor = '#000'; }); dropZone.addEventListener('dragleave', () => { dropZone.style.borderColor = '#ccc'; }); dropZone.addEventListener('drop', (e) => { e.preventDefault(); dropZone.style.borderColor = '#ccc'; const files = e.dataTransfer.files; for (let file of files) { console.log(file.name); } }); </script> </body> </html> ``` I have confirmed that the drag-and-drop events are firing by adding console logs, and the drop event is triggered. However, `e.dataTransfer.files` is always undefined on Edge, leading to no files being processed. I've tried testing with different file types and sizes, and I also ensured that the file input is not disabled. Is there any specific configuration or workaround for getting the drag-and-drop functionality to work as expected in Edge? I appreciate any help or insights! This is part of a larger web app I'm building. Is there a better approach?