[BUG] v0.4.0 returning empty value as file path in electron

[barbalex]

Describe the bug
In my project I have updated react-dropzone from v11.5.1 to v12.0.0.
Since then the path key of the file returned by react-dropzone is empty:

I once had similar issues. So I checked the version of file-selector used using yarn why file-selector. It returns:

• 0.2.4 in react-dropzone v11.5.1

• 0.4.0 in react-dropzone v12.0.0

I have repeatedly up/downgraded react-dropzone versions and this issue consistently occurs on v12.0.0/0.4.0.

I tried installing react-dropzone v12.0.0 while enforcing file-selector v0.2.4 using yarn resolutions. That did not work as no file was returned from react-dropzone (also no error occured). So it seems I have to stay on react-dropzone v11.5.1 for now.

To Reproduce
I would have to build a minimal electron app to demonstrate this.

Expected behavior
The full path should be returned as it did in previous versions.

Desktop:

• OS: Windows 11
• electron v17.0.0

[rolandjitsu]

@barbalex thanks for reporting this. Interesting. These are the changes b/t v0.2 and v0.4.

The major changes are around supporting the File System Access API. There's no changes in how the path gets read and set. So do you think it's possible electron supports the API and there's something about getting the files with no path? This would happen if you use click to select instead of drag 'n' drop, so when does it happen?

Btw, you can disable the fs access API by using useFsAccessApi: false in useDropzone({}).

[barbalex]

This would happen if you use click to select instead of drag 'n' drop, so when does it happen?

I tried again with v12.0.0:

• it happens (=path is empty) when klicking to choose a file
• path is correct when dropping a file
• path is also correct when I add useFsAccessApi={false} in the Dopzone element

[rolandjitsu]

Ok, thanks. Yes, so it's probably the FS access API that's probably not giving the path. I wonder if this has something to do with permissions 🤔

Could you quickly try this:

getFile()

async function getFile() {
  // open file picker
  const [fileHandle] = await window.showOpenFilePicker();
  const canRead = verifyPermission(fileHandle);

  if (canRead) {
    const fileData = await fileHandle.getFile();
    console.log(fileData);
  } else {
    console.warn('no permissions to read file')
  }
}

async function verifyPermission(fileHandle, withWrite) {
  const opts = {};
  // Check if we already have permission, if so, return true.
  if (await fileHandle.queryPermission(opts) === 'granted') {
    return true;
  }

  // Request permission to the file, if the user grants permission, return true.
  if (await fileHandle.requestPermission(opts) === 'granted') {
    return true;
  }

  // The user did not grant permission, return false.
  return false;
}

Try removing the verifyPermission funct too and see if the end result is any different.

[harshag]

I am seeing same issue on latest 0.6.0 version.
However I noticed on windows its not failing all the time, sometimes it works.
On mac though fails all the time. DargDrop works.

For now going ahead with useFsAccessApi={false} property. I will try running above code and post update here

[9996b6999]

This would happen if you use click to select instead of drag 'n' drop, so when does it happen?

I tried again with v12.0.0:

• it happens (=path is empty) when klicking to choose a file
• path is correct when dropping a file
• path is also correct when I add useFsAccessApi={false} in the Dopzone element

v14. Win 11. Electron.
useFsAccessApi={false} helps me:

const { getRootProps, getInputProps, isDragActive, isDragReject } = useDropzone({
onDrop,
useFsAccessApi: false
})

[rolandjitsu]

I'm going to close this as I believe that the issue was due to the new file access API usage. We've made that disabled by default in react-dropzone now until it becomes available in the baseline browsers.

If the issue persists, please create a new issue.