file-selector
file-selector copied to clipboard
react-dropzone
react-dropzone v8.2.0 returns only file name in path property in electron, not the path
The files Objects returned on onDrop used to return the entire file path in the path property. Sinse v8.2.0 not any more.
The path property should contain the entire path, just as it does in v8.1.0.
According to https://github.com/react-dropzone/react-dropzone/issues/769#issuecomment-466914018 the issue lies in file-selector.
Last tested with react-dropzone v10.0.4 that according to
$ yarn list --pattern file-selector
yarn list v1.13.0
└─ [email protected]
Done in 3.56s.
contains file-selector v0.1.11
Please see a screencast which illustrates the {path} works as expected and it is different from the {name}.
Without a bit more info and some reproducible example it's hard to tell what you're experiencing.
Do you have an example implementation in an online code playground I could fork off of for that?
Also: see https://github.com/react-dropzone/react-dropzone/issues/769#issuecomment-473516195 and https://github.com/react-dropzone/react-dropzone/issues/769#issuecomment-473518576 that explain why I now think it is not file-selector's fault
this is the component used: https://github.com/barbalex/awel-personal/blob/master/app/components/PersonContainer/Person/Links/index.js
Do you have an example implementation in an online code playground I could fork off of for that?
It's the official docs site at react-dropzone.js.org. The code is in the readme files in examples.
Also: see react-dropzone/react-dropzone#769 (comment) and react-dropzone/react-dropzone#769 (comment) that explain why I now think it is not file-selector's fault
This doesn't really help.
this is the component used: https://github.com/barbalex/awel-personal/blob/master/app/components/PersonContainer/Person/Links/index.js
Looks ok, I don't see anything there that may cause some issues with the dropzone.
Thanks for helping.
I guess I will give up here and stick with v8.1.0 for now. Hoping this will resolve in some future update.
Looking at my yarn.lock file I just realized that react-dropzone v8.1.0 had no dependency on file-selector. So it does seem that file-selector could be the reason for my problems.
It could really help to get an isolated example on codesandbox or somewhere so we can investigate the issue.
Yeah, you're right. Unfortunately I have to deliver an app next week. Will revisit this issue after that.
I still observe this with react-dropzone 10.1.5 and file-selector 0.1.12. I had to pin react-dropzone at 8.1.0 to work around the issue.
Even though the source code npm pulled for file-selector appears to include the most recent commit that tries to address the issue, I can still set a breakpoint in minified code which writes over a path property containing the full path and replaces it with the filename only.
@parkertomatoes the commit you mentioned addresses Electron, whereas this issue doesn't specifically mention that.
Without a way to reproduce this, it's difficult to find what the issue is.
I'm experiencing the same issue using react-dropzone with Electron. Also using react-dropzone v10.1.5 and file-selector v0.1.12. Worked fine in one project for me but not in a new one 🤷♂
@rolandjitsu
the commit you mentioned addresses Electron, whereas this issue doesn't specifically mention that
I did not mention it but my project is built in electron. Did not think that was important.
@barbalex 😆 ok, it is important. Because this seems to be an issue that https://github.com/react-dropzone/file-selector/pull/11 addressed and should have fixed. Have you tried latest of this lib?
I updated react-dropzone to v10.1.5, cleared yarn.lock and the node-modules folder, ran yarn. Now this code:
const onDrop = useCallback(files => {
console.log('file:', files[0])
addLink(files[0].path)
})
const Drop = () => (
<Container name="links">
<DropzoneContainer>
<StyledDropzone onDrop={onDrop}>
{({ getRootProps, getInputProps, isDragActive, isDragReject }) => {
if (isDragActive) {
return (
<DropzoneInnerDiv {...getRootProps()}>
<div>jetzt fallen lassen...</div>
</DropzoneInnerDiv>
)
}
if (isDragReject) {
return (
<DropzoneInnerDiv {...getRootProps()}>
<div>Hm. Da ging etwas schief :-(</div>
</DropzoneInnerDiv>
)
}
return (
<DropzoneInnerDiv {...getRootProps()}>
<input {...getInputProps()} />
<div>Datei hierhin ziehen...</div>
<div>...oder klicken, um sie zu wählen.</div>
</DropzoneInnerDiv>
)
}}
</StyledDropzone>
</DropzoneContainer>
<Links>
{myLinks.map(link => (
<Link key={`${link.idPerson}${link.url}`} link={link} />
))}
</Links>
</Container>
)
logs:
lastModified: 1320526444000
lastModifiedDate: Sat Nov 05 2011 21:54:04 GMT+0100 (Mitteleuropäische Normalzeit) {}
name: "Alex.jpg"
path: "Alex.jpg"
size: 62250
type: "image/jpeg"
webkitRelativePath: ""
I reverted to v8.1.0 and get this output:
lastModified: 1320526444000
lastModifiedDate: Sat Nov 05 2011 21:54:04 GMT+0100 (Mitteleuropäische Normalzeit) {}
name: "Alex.jpg"
path: "D:\Dropbox\Gabriel_Multimedia\Bilder\Alex Auswahl\Alex.jpg"
size: 62250
type: "image/jpeg"
webkitRelativePath: ""
Also:
$ yarn why file-selector
yarn why v1.15.2
[1/4] Why do we have the module "file-selector"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "[email protected]"
info Reasons this module exists
- "react-dropzone" depends on it
- Hoisted from "react-dropzone#file-selector"
info Disk size without dependencies: "212KB"
info Disk size with unique dependencies: "272KB"
info Disk size with transitive dependencies: "272KB"
info Number of shared dependencies: 1
Done in 0.83s.
...file-selector is installed in v0.1.12, which should be patched.
So: for me the problem still exists. Here is the project if you want to know more: https://github.com/barbalex/awel-personal
Seems that react-dropzone does not use file-selector in v8.1.0:
$ yarn why file-selector
yarn why v1.15.2
[1/4] Why do we have the module "file-selector"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
error We couldn't find a match!
Done in 0.80s.
(I cheched to see if I could find the update in file-selector that broke the path)
@barbalex I will try to find some time to try your project and see what's going on.
You will need a db to connect. I just added one here: https://github.com/barbalex/awel-personal/blob/master/testdata.db
When the app has started up, click on the field "Datei-Links" shown in the image below:
That is this component: https://github.com/barbalex/awel-personal/blob/master/app/components/PersonContainer/Person/Links/index.js
I just migrated one of my electron apps from electron-react-boilerplate (https://github.com/electron-react-boilerplate/electron-react-boilerplate) to using electron-forge (https://www.electronforge.io).
I had to change the way the app interacted with node as some tools (exceljs, win.webContents.printToPDF) worked differently (they behaved as if they were in a browser as node methods were missing which had been present previously). So I thought I would try to use a version of react-dropzone above 8.1.0 and updated to v10.1.10. And it works, just as it does when used in the browser.
So it seems that the error that happens above v8.1.0 has something to do with the presence of node methods? Could there be a name collision? I mean: The same method exists in node but behaves differently?
@barbalex it's possible that the node API implementation is different. It could be helpful to provide some docs on how electron handles file paths, then we could, maybe, add support for it.
Hello,
Would the following PR be considered: include a option to ignore the absolute path that Electron provides, and instead use the path normally returned by in a browser environment?
The reason for this is we actually don't want the absolute path provided by Electron. Currently we have forked this library and react-dropzone.
Having this option may be useful for other people.
Thanks
@jmcrthrs please submit a proposal as a new issue and we'll discuss there. Thanks.
@jmcrthrs please submit a proposal as a new issue and we'll discuss there. Thanks.
Ok I have opened https://github.com/react-dropzone/file-selector/issues/36. Thanks.
I am having this exact same problem again when using tauri. Only get the file name in the path, which makes no sense as that is also passed separately.
useFsAccessApi={false} does not help.
I have tried three versions of dropzone, 11, 12 and 14. Happens with any.
I explicitely tried with dropzone v11.7.1 because that works fine on electron. But not on tauri.
I got it working .. this package doesn’t give us path in response , just need to pass its whole response as an argument 👍🏼
