search

react-dropzone / file-selector

Convert a DragEvent or file input to a list of File objects
MIT License
95 stars 33 forks source link

react-dropzone v8.2.0 returns only file name in path property in electron, not the path #10

Closed barbalex closed 1 month ago

barbalex commented 5 years ago

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
└─ file-selector@0.1.11
Done in 3.56s.

contains file-selector v0.1.11

rolandjitsu commented 5 years ago

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.

barbalex commented 5 years ago

Do you have an example implementation in an online code playground I could fork off of for that?

barbalex commented 5 years ago

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

barbalex commented 5 years ago

this is the component used: https://github.com/barbalex/awel-personal/blob/master/app/components/PersonContainer/Person/Links/index.js

rolandjitsu commented 5 years ago

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.

barbalex commented 5 years ago

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.

barbalex commented 5 years ago

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.

rolandjitsu commented 5 years ago

It could really help to get an isolated example on codesandbox or somewhere so we can investigate the issue.

barbalex commented 5 years ago

Yeah, you're right. Unfortunately I have to deliver an app next week. Will revisit this issue after that.

parkertomatoes commented 5 years ago

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.

rolandjitsu commented 5 years ago

@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.

jacobgoudy commented 5 years ago

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 🤷‍♂

barbalex commented 5 years ago

@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.

rolandjitsu commented 5 years ago

@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?

barbalex commented 5 years ago

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 "file-selector@0.1.12"
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

barbalex commented 5 years ago

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)

rolandjitsu commented 5 years ago

@barbalex I will try to find some time to try your project and see what's going on.

barbalex commented 5 years ago

You will need a db to connect. I just added one here: https://github.com/barbalex/awel-personal/blob/master/testdata.db

barbalex commented 5 years ago

When the app has started up, click on the field "Datei-Links" shown in the image below:

2019-07-17_10h46_47

That is this component: https://github.com/barbalex/awel-personal/blob/master/app/components/PersonContainer/Person/Links/index.js

barbalex commented 5 years ago

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?

rolandjitsu commented 5 years ago

@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.

rolandjitsu commented 4 years ago

@barbalex is this something that you're still having trouble with?

barbalex commented 4 years ago

No - I don't remember since when but it now seems to work

jmcrthrs commented 4 years ago

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

rolandjitsu commented 4 years ago

@jmcrthrs please submit a proposal as a new issue and we'll discuss there. Thanks.

jmcrthrs commented 4 years ago

@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.

barbalex commented 2 years ago

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.

tiwarivijay123 commented 2 years ago

Any success in this , same issue I'm also receiving...

tiwarivijay123 commented 2 years ago

I got it working .. this package doesn’t give us path in response , just need to pass its whole response as an argument 👍🏼

Marcelo-maga commented 1 year ago

Could you show me an example of how you did it?

gdianaty commented 2 months ago

Hello! I've recently migrated my project to a much newer version of Electron (21.1.0 -> 32.0.1). I am now experiencing this bug but only when the app is unpackaged by electron-packager. I'll be sure to share if I get to the bottom of it.

steveoh commented 1 month ago

Hello! I've recently migrated my project to a much newer version of Electron (21.1.0 -> 32.0.1). I am now experiencing this bug but only when the app is unpackaged by electron-packager. I'll be sure to share if I get to the bottom of it.

I just updated to 32.1.2 and am hitting this bug. Did you sort it out yet?

I'm assuming this is causing the issue?

This seems like the fix but I'm not sure how to import it yet...

gdianaty commented 1 month ago

Hello! I've recently migrated my project to a much newer version of Electron (21.1.0 -> 32.0.1). I am now experiencing this bug but only when the app is unpackaged by electron-packager. I'll be sure to share if I get to the bottom of it.

I just updated to 32.1.2 and am hitting this bug. Did you sort it out yet?

I'm assuming this is causing the issue?

This seems like the fix but I'm not sure how to import it yet...

Admittedly, we fixed this by downgrading to 31.4.0. That does look like it may be at fault.

Unfortunately we're thinking there's a bug within Electron itself that nobody's reported (we reimplemented some of this library ourselves, and this is the best theory we have). Rather than fix it properly we just upgraded to the newest that worked.

steveoh commented 1 month ago

I was able to fix my usage

rolandjitsu commented 1 month ago

@barbalex is this still an issue?

barbalex commented 1 month ago

@barbalex is this still an issue?

I have no active electron projects currently so no way to say. Sorry.

steveoh commented 1 month ago

This is by design for security. I suggest closing this.

rolandjitsu commented 1 month ago

@barbalex ok. I may go ahead and close this and you can reopen when you encounter the issue again.

On Sat, Oct 5, 2024, 01:06 steveoh @.***> wrote:

This is by design for security. I suggest closing this.

— Reply to this email directly, view it on GitHub https://github.com/react-dropzone/file-selector/issues/10#issuecomment-2394729916, or unsubscribe https://github.com/notifications/unsubscribe-auth/AALJIOK5SMZKZGEHXBRHDV3ZZ4GOVAVCNFSM6AAAAABM7BIC6OVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGOJUG4ZDSOJRGY . You are receiving this because you were mentioned.Message ID: @.***>

ej-toita commented 1 day ago

In case there is anyone looking for a way to get a full-path in an electron environment, I recommend to try setting getFilesFromEvent to useDropzone as mentioned below; https://github.com/electron/electron/issues/44600#issuecomment-2465774352 along with webUtils.getPathForFile API of electron. https://www.electronjs.org/docs/latest/api/web-utils#webutilsgetpathforfilefile

You might as well try to pass onDrop https://html.spec.whatwg.org/multipage/indices.html#ix-handler-ondrop directly to the DOM that you use getRootProps() on, not via useDropzone:

    const onDrop = (event: React.DragEvent<HTMLDivElement>) => {
      event.preventDefault();
      const file = event.dataTransfer?.files[0];
      if (file != null) {
         // use file here
      }
    };
      <div {...getRootProps()} onDrop={onDrop}>

because webUtils.getPathForFile(file) behaves as follows.

In the case where the File object passed in was constructed in JS and is not backed by a file on disk an empty string is returned. https://www.electronjs.org/docs/latest/api/web-utils#webutilsgetpathforfilefile