[FEAT]: Native drap and drop for file and folder with complete filepath

[hinupurthakur]

Is your feature request related to a problem? Please describe. Currently, on Wails v1.16.8 as for windows development it depends on IE11 (as Windows development use the mshtml library which is only compatible with IE11), and On IE11, the drag and drop is not supported for folder. Whereas with Chrome, we can have file or folder drag and drop functionality.

Describe the solution you'd like Feature that can be suitable would be native drag and drop with absolute path of dropped file/folder and if the dependency to IE11 can be removed.

Describe alternatives you've considered Currently, We have tried the following approaches but not complete solution was found:

1. Use ngx-file-drop library for drag and drop, it worked fine for chrome but for IE11, only file drop was working fine and not folder. But was not providing absolute path of neither file not folder..
2. HTML Drag and drop: Failed for both file and folder.
3. Drag and drop on Input Type=File: Failed for both file and folder.
4. Created our own directive even it failed for both file and folder.

Additional context

[leaanthony]

For Windows, the recommendation is to move to v2.

[hinupurthakur]

@leaanthony On v2, Do we have the native drag and drop functionality.

[leaanthony]

No, but HTML dnd should.

[hinupurthakur]

No, but HTML dnd should.

Okay Let me check. I will update here with its status.

[hinupurthakur]

@leaanthony It worked with wails v2 but We are not getting the full path of the drag and dropped file. Which make sense for the browser but the full path for the local machine should be accessible. Do we have any work around in wails?

[leaanthony]

Thanks for replying. Not right now but happy to accept a PR if it works on all platforms. Why do you need the path?

[hinupurthakur]

Okay, I will be happy to contribute for this feature. Should I include the complete drag and drop functionality ( HTML implementation) with full path as Native drag and drop?

Also, I need the path as I want to create some chunks of the file at the location of where the file is located and that is to be done from the Backend (Go)

[misitebao]

Okay, I will be happy to contribute for this feature. Should I include the complete drag and drop functionality ( HTML implementation) with full path as Native drag and drop?

Also, I need the path as I want to create some chunks of the file at the location of where the file is located and that is to be done from the Backend (Go)

At present, there is no way for the front end to obtain the file content. The current feasible way is to start a service on the back end, and then pass the front end to the back end through the service, just like uploading a file on a web page. Because the current Wails does not provide a good way, this method can only be adopted. accomplish.

[Purple-CSGO]

It's natural for modern app developers to bring in drag n drop feature. It makes users comfortable to select files or dirs.

@hinupurthakur Could you post a link referring to how the full path is got when it's done? It's definitely an important feature for me to choose the framework.

[hinupurthakur]

At present, there is no way for the front end to obtain the file content. The current feasible way is to start a service on the back end, and then pass the front end to the back end through the service, just like uploading a file on a web page. Because the current Wails does not provide a good way, this method can only be adopted. accomplish.

@misitebao Currently, yes involvment with the backend is the only work around but a feature for a drag and drop with complete file path would be a really good option for the wails.

[hinupurthakur]

@hinupurthakur Could you post a link referring to how the full path is got when it's done? It's definitely an important feature for me to choose the framework.

Currently from frontend there isn't any possiblity, The work around I am having is involving backend with frontend to get the fullpath

[leaanthony]

I suggest you take a look at https://github.com/splode/optimus which has drag and drop capabilities.

[hinupurthakur]

@leaanthony I have checked the https://github.com/splode/optimus implementation of drag and drop but it is limited to file only. I also need to implement drag and drop for directory (folder).

[leaanthony]

I suggest changing the ticket title

[hinupurthakur]

@leaanthony Can you help with how we can proceed with this issue to the feature implementation?

[leaanthony]

https://protonet.com/blog/html5-experiment-drag-drop-of-folders/ ?

[hinupurthakur]

@leaanthony This wasn't helpful for full filepath.

[leaanthony]

I can't help you with this.

[hinupurthakur]

@leaanthony So Can we work towards integrating this feature in wails? Or is it not possible at all?

[leaanthony]

Sure, I'd love this feature, if you want to try and make it work. How is it implemented in other frameworks?

[hinupurthakur]

@leaanthony I am a backend developer but will research more on it and will provide more information here. Any help from other community members would be really appreciated as well. Thanks!

[annikovk]

Electron extends DOM to include path to file: https://www.electronjs.org/docs/latest/api/file-object#file-object

File interface provides abstraction around native files in order to let users work on native files directly with the HTML5 file API.

[leaanthony]

Yeah, I wonder how they do that?

[leaanthony]

How did you get on?

[hinupurthakur]

@leaanthony I would really like to help here to implement something like what electronjs have but probably I will need some guidance there to understand the project better. Let me know if there is a community call or meeting that I can connect on to contribute to this.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[amlwwalker]

@leaanthony @hinupurthakur

Followed this conversation and dug into the Electron solution for this to see what was involved. I'm a little swept off my feet at the moment, however it seems that this is the code that does what you are asking about here

https://github.com/electron/electron/blob/main/patches/chromium/blink_file_path.patch

referenced in the documentation here...

https://www.electronjs.org/docs/latest/api/file-object

How to map this to Wails, I am not sure, but perhaps this is a good place to start?

[leaanthony]

Thanks for the links. The patch is patching the browser so there's not much we can take from that. Reopening though 👍

[selvinortiz]

I would love to have this feature for a new Desktop App. This app (Varly) would benefit from having files/folders dropped right onto its UI.

Happy to contribute to this effort however I can.

Here is a repository/plugin that offers this functionality for Flutter. It contains the native code for macOS, Windows, and Linux: https://github.com/MixinNetwork/flutter-plugins/tree/main/packages/desktop_drop

I'm not an expert in C or Swift but willing to figure it out. Is the code in this repository something that we could bring into wails?

[wangleilei2010]

I also need this feature. Now the tool based wails2 could open local file dialog and select one and then import by the full path, that's great. If wails supports files dargging will be amazing. Because work in local, there's no need to transfer the full content of files from frontend to backend, it just need a fullpath, backend read and parse from the path.

[leaanthony]

Scheduled for 2.5 but will consider before then if a PR is raised 👍

[yupoog]

Not sure if this is useful https://github.com/MicrosoftEdge/WebView2Feedback/issues/2313#issuecomment-1079911649