Platform: accessing DataTransferItems during external drag (before drop)

[psychedelicious]

The docs say:

Due to the web platform drag and drop security model, you can know what "types" are being dragging during a drag (eg "text/plain"), but you can only see what data is being dragged (exposed through .items) during a successful "drop" event (onDrop()).

https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/external/about#monitor-for-external

However, it looks like I can access the items using the native dnd API as seen in this demo: https://stackblitz.com/edit/vitejs-vite-cgmywj?file=src%2FApp.tsx

I was confused about this until I realized I only get the items on Chrome and FF - not Safari.

• Who is implementing the spec correctly - Chrome & FF or Safari?
• If Chrome & FF are adhering to the spec, can we expect pdnd to expose items during drag events once Safari catches up?
• Are there any suggested workarounds to provide user feedback as soon as a drag starts? I'd like to be able to, for example, enable some drop targets only when the drag has image files.

Thanks!

---

Some context, in case this helps anyone else who is migrating to pdnd and confused by this.

I was porting from react-dropzone. You provide file constraints to the useDropzone hook, and it uses those for validation when the drag starts. As I migrated the constraints to pdnd, I was puzzled when I didn't get any items to validate in my canDrop callback. I double-checked the native events and saw the items.

Like native events, react-dropzone provides items during drag on Chrome & FF but not Safari. On Safari, it handles any drag as invalid. I had apparently never tested our react-dropzone dnd implementation with Safari until now.

[alexreardon]

I am looking deeply into this

[imsharukh1994]

How It Works:
1. Default State:
• The drop area has a simple, welcoming message like “Drag files here” to guide the user.
• The area appears clean and visually neutral, with a border and light background.
2. During Drag:
• When the user starts dragging something into the drop area:
• The background subtly changes to a light color, signaling the area is active.
• The message updates dynamically:
• If the item is valid (e.g., image files), it might say: “Drop your images here!”
• If the item is invalid, it might say: “Only image files are allowed.”
• If it’s unclear, it could say: “This doesn’t look like a file.”
3. When Dropping Files:
• As soon as files are dropped:
• A message confirms success, such as “You dropped X file(s).”
• If the files are invalid, the message guides the user to try again, like “That file type isn’t supported. Try again.”
4. Visual Cues:
• During drag:
• The drop area has a soft highlight or glow to show it’s active.
• After drop:
• The area resets to its original state, ensuring a clean look.
5. Cross-Browser Compatibility:
• On browsers like Safari, it makes broad checks (e.g., looking for any file types) and provides feedback without prematurely rejecting files.
• On Chrome and Firefox, it gives more detailed feedback during the drag based on the file type.

Why This Approach Feels Friendly:
• Clear Guidance: The user always knows what to do next, with simple messages tailored to the situation.
• Visual Engagement: Subtle animations and color changes make the interaction feel responsive and welcoming.
• Encouraging Feedback: Success messages feel rewarding, while error messages remain helpful and non-judgmental.

You can adapt this functionality to any drag-and-drop setup for a seamless and intuitive user experience.