HTML5 Drag-and-Drop File Uploads optimization guide in Firefox 110 with Custom Icons
I'm having a hard time understanding I'm upgrading from an older version and I'm converting an old project and I'm relatively new to this, so bear with me... I'm trying to implement a drag-and-drop file upload feature using HTML5, but it's not functioning correctly in Firefox 110. When I drag files over my drop area, the custom icons I created to indicate the drag-and-drop action do not appear. Instead, the default behavior shows a generic 'no-drop' icon. I have the following code set up, which works perfectly in Chrome and Edge: ```html <div id="drop-area"> <p>Drag & drop files here</p> <input type="file" id="fileElem" multiple accept="image/*" style="display:none;" /> <label for="fileElem" id="fileLabel">Upload a file</label> </div> ``` ```css #drop-area { border: 2px dashed #ccc; padding: 20px; text-align: center; } #drop-area.highlight { border-color: purple; } ``` ```javascript let dropArea = document.getElementById('drop-area'); ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { dropArea.addEventListener(eventName, preventDefaults, false); document.body.addEventListener(eventName, preventDefaults, false); }); function preventDefaults(e) { e.preventDefault(); e.stopPropagation(); } function highlight() { dropArea.classList.add('highlight'); } function unhighlight() { dropArea.classList.remove('highlight'); } dropArea.addEventListener('dragover', highlight, false); dropArea.addEventListener('dragleave', unhighlight, false); ``` I've tried adding event listeners for `dragover` and `dragleave`, but the drag state doesn't appear to be changing as expected in Firefox. I also tried checking for the presence of `dataTransfer` and ensuring that I'm correctly handling the file drop event, but it seems like the drag-and-drop functionality is simply not allowing the correct icon to display. Additionally, I receive no behavior messages in the console when testing in Firefox, which makes it harder to debug. Has anyone faced a similar scenario where drag-and-drop doesn't work as expected across different browsers? Any tips on how to ensure that the custom drag events function properly in Firefox would be greatly appreciated. This is part of a larger service I'm building. I recently upgraded to Html 3.10. I'm coming from a different tech stack and learning Html. What are your experiences with this? This is happening in both development and production on Ubuntu 20.04. Thanks, I really appreciate it!