Case ce-0085 · Scenario scenario-file-api

File API drag and drop does not work in contenteditable

OS: macOS 14.0 Device: Desktop or Laptop MacBook Pro Browser: Safari 17.0 Keyboard: US Status: draft
file-api drag-drop safari macos

Phenomenon

When trying to drag and drop files into a contenteditable element, the File API may not work as expected. File drop events may not fire, or file content may not be accessible.

Reproduction example

  1. Create a contenteditable div.
  2. Try to drag a file from the file system into the contenteditable.
  3. Listen for drop events and try to read file content.
  4. Observe whether files can be dropped and accessed.

Observed behavior

  • In Safari on macOS, file drag and drop may not work in contenteditable.
  • Drop events may not fire for files.
  • File content may not be accessible.
  • The default paste behavior may interfere.

Expected behavior

  • File drag and drop should work in contenteditable.
  • Drop events should fire correctly.
  • File content should be accessible via File API.

Playground for this case

Use the reported environment as a reference and record what happens in your environment while interacting with the editable area.

Reported environment
OS: macOS 14.0
Device: Desktop or Laptop MacBook Pro
Browser: Safari 17.0
Keyboard: US
Your environment

Use this editable area to reproduce the described case.

Event log
Use this log together with the case description when filing or updating an issue.
0 events
Interact with the editable area to see events here.