DataTransferItem.getAsFileSystemHandle resolves to undefined

[rolandjitsu]

Current behavior

While using Cypress, with selectFile to run a simple UI test of https://react-dropzone.js.org/, the drop event's DataTransferItem doesn't seem to work as expected.

Our library will invoke getAsFileSystemHandle if available, which seems it is when using Cypress, but the result we get is undefined:

DevTools listening on ws://127.0.0.1:52093/devtools/browser/19b45822-c534-4b47-ab50-962ad0ed43f1
Couldn't find tsconfig.json. tsconfig-paths will be skipped

====================================================================================================

  (Run Starting)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Cypress:        13.15.2                                                                        │
  │ Browser:        Electron 118 (headless)                                                        │
  │ Node Version:   v20.17.0 (/usr/local/bin/node)                                                 │
  │ Specs:          1 found (dragndrop.cy.js)                                                      │
  │ Searched:       cypress/e2e/**/*.cy.{js,jsx,ts,tsx}                                            │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


────────────────────────────────────────────────────────────────────────────────────────────────────
                                                                                                    
  Running:  dragndrop.cy.js                                                                 (1 of 1)


  drag and drop works
[20166:1116/194047.866031:INFO:CONSOLE(24507)] "%cDownload the React DevTools for a better development experience: https://react.dev/link/react-devtools font-weight:bold", source: webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (24507)
[20166:1116/194047.962779:INFO:CONSOLE(16)] "Image with src "http://localhost:3000/next.svg" has either width or height modified, but not the other. If you use CSS to change the size of your image, also include the styles 'width: "auto"' or 'height: "auto"' to maintain the aspect ratio.", source: webpack-internal:///(app-pages-browser)/./node_modules/next/dist/shared/lib/utils/warn-once.js (16)
[20166:1116/194047.963012:INFO:CONSOLE(16)] "Image with src "http://localhost:3000/vercel.svg" has either width or height modified, but not the other. If you use CSS to change the size of your image, also include the styles 'width: "auto"' or 'height: "auto"' to maintain the aspect ratio.", source: webpack-internal:///(app-pages-browser)/./node_modules/next/dist/shared/lib/utils/warn-once.js (16)
[20166:1116/194047.967754:INFO:CONSOLE(117)] "[object DataTransferItem]", source: webpack-internal:///(app-pages-browser)/./node_modules/file-selector/dist/es2015/file-selector.js (117)
[20166:1116/194047.974751:INFO:CONSOLE(56)] "TypeError: Cannot read properties of undefined (reading 'getFile')", source: webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/globals/intercept-console-error.js (56)
    1) just works


  0 passing (5s)
  1 failing

  1) drag and drop works
       just works:
     AssertionError: Timed out retrying after 4000ms: Expected to find element: `#cy-list`, but never found it.
      at Context.eval (webpack://react-dropzone-nextjs/./cypress/e2e/dragndrop.cy.js:5:7)




  (Results)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Tests:        1                                                                                │
  │ Passing:      0                                                                                │
  │ Failing:      1                                                                                │
  │ Pending:      0                                                                                │
  │ Skipped:      0                                                                                │
  │ Screenshots:  1                                                                                │
  │ Video:        false                                                                            │
  │ Duration:     4 seconds                                                                        │
  │ Spec Ran:     dragndrop.cy.js                                                                  │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


  (Screenshots)

  -  /Users/rolandgroza/Work/react-dropzone-nextjs/cypress/screenshots/dragndrop.cy.j    (2560x1440)
     s/drag and drop works -- just works (failed).png                                               


====================================================================================================

  (Run Finished)


       Spec                                              Tests  Passing  Failing  Pending  Skipped  
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ ✖  dragndrop.cy.js                          00:04        1        -        1        -        - │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘
    ✖  1 of 1 failed (100%)                     00:04        1        -        1        -        -  

Desired behavior

If the getAsFileSystemHandle is available, then it should return the FileSystemFileHandle, otherwise null:

A Promise.

If the item's kind property is "file", and this item is accessed in the dragstart or drop event handlers, then the returned promise is fulfilled with a FileSystemFileHandle if the dragged item is a file or a FileSystemDirectoryHandle if the dragged item is a directory.

Otherwise, the promise fulfills with null.

Otherwise, maybe provide some way to get around this issue.

Test code to reproduce

You can use react-dropzone/react-dropzone-nextjs (the test/cypress branch) to run the test and see the output.

Cypress Version

13.15.2

Node version

v20.17.0

Operating System

macOS 12.7

Debug Logs

https://pastejustit.com/gxssrxceoy

Other

No response

[rolandjitsu]

It seems like this may be a browser issue. If you try the following in Chrome 130:

const dt = new document.defaultView.DataTransfer();
const js = JSON.stringify({test: 1});
const b = new Blob([js], {type: "application/json"});
const f = new File([b], "test.json");
dt.items[0].getAsFileSystemHandle().then(h => console.log(h))

undefined is printed in the console 😕

Not sure if it's because I'm not in a secure context (running from console) or it's just undefined behaviour.