DataTransfer API not working after first use
I'm trying to create a Drag & Drop file feature in my web page following this doc https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop
The dropHandler function works as expected the first time I tried to drop a file into a "drop area" div, but then does not work anymore. In all subsequent calls, the drop event is triggered but there is no file in
`` event.dataTransfer.items // empty event.dataTransfer.files // empty ```
This behavior is the same in Troubleshoot Mode.
Additional data
Firefox version: 123.0.1 (64 bits) OS: Debian 12
All Replies (5)
I have a bunch of pages that are designed to work with a single file. If the drop list has more than one item, the additional items are disregarded. It seems to work with repeated drops of multiple files dragged from Windows File Explorer. Does the code work on your Firefox?
jscher2000 - Support Volunteer said
I have a bunch of pages that are designed to work with a single file. If the drop list has more than one item, the additional items are disregarded. It seems to work with repeated drops of multiple files dragged from Windows File Explorer. Does the code work on your Firefox? https://www.jeffersonscher.com/ffu/scrounger.html
Thanks, I have more details about this issue. When I drag and drop a file from a File Explorer window to my web app, it works if the File Explorer window is not maximized.
With a maximized File Explorer window, this procedure fails:
1. Drag the file from the File Explorer to the Firefox icon in the icon tray, 2. When the Firefox window pop ups, drop the file to the proper DIV in the web app. 3. The drop event is raised, but the event.target.files is empty.
I'm using Debian with KDE and Plasma.
Modified by Fernando Miranda
jscher2000 - Support Volunteer said
I have a bunch of pages that are designed to work with a single file. If the drop list has more than one item, the additional items are disregarded. It seems to work with repeated drops of multiple files dragged from Windows File Explorer. Does the code work on your Firefox? https://www.jeffersonscher.com/ffu/scrounger.html
Modified by Fernando Miranda
jscher2000 - Support Volunteer said
I have a bunch of pages that are designed to work with a single file. If the drop list has more than one item, the additional items are disregarded. It seems to work with repeated drops of multiple files dragged from Windows File Explorer. Does the code work on your Firefox? https://www.jeffersonscher.com/ffu/scrounger.html
Thanks, I have more details about this issue.
If I drag a file from the File Explorer to my webapp, it works if both windows (File Explorer and FF) are visible.
When the File Explorer is maximized, this procedure fails:
1. Drag a file from File Explorer to the FF icon in the Taskbar. 2. When the FF window pop-ups, drop the file. 3. The drop event is triggered but event.dataTransfer.files is empty.
I'm using Debian with KDE and Plasma.
That's difficult to test because I have nearly 60 windows open so getting to the correct Firefox window is a bit of a pain. But at least for me, dropping on the box still works both the first and second times. Hopefully a Linux user can test.