This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Avatar for Username

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

This thread was archived. Please ask a new question if you need help.

DataTransfer API not working after first use

Fernando Miranda
Fernando Miranda
more options

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

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
Attached screenshots

All Replies (5)

jscher2000 - Support Volunteer
jscher2000 - Support Volunteer
  • Top 10 Contributor
more options

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

Fernando Miranda
Fernando Miranda Question owner
more options

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

Fernando Miranda
Fernando Miranda Question owner
more options

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

Fernando Miranda
Fernando Miranda Question owner
more options

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.

jscher2000 - Support Volunteer
jscher2000 - Support Volunteer
  • Top 10 Contributor
more options

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.