ListView - drag & drop of files not possible

[mgordic]

Category

[ ] Enhancement

[ ] Bug

[ x] Question

Version

Please specify what version of the library you are using: [2.4.0]

If you are not using the latest release, please update and see if the issue is resolved before submitting an issue.

Expected / Desired Behavior / Question

I want to implement file upload through the ListView component. Everything seems correctly set (I used code from ControlsTest.tsx) but when I try to drag and drop files, nothing happens. It's not indicating that drag & drop is allowed, there are no lines that indicate that, nothing.

Any ideas? Should I install some additional libraries to make this work?

Thanks!

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[aaclage]

This control just retrieves the Files object, you need to create the method to send the files.
Here a example:
http://aaclage.blogspot.com/2020/10/new-drag-and-drop-listview-pnpspfx.html

[mgordic]

Hi @aaclage

Thank you for your quick reply. I already found your blog post.

I configured everything, but unlike in your blog post's second picture, in my case, nothing happens when I drag files into ListView.

Thank you
Marko

[aaclage]

Track what is returning using console.log

[mgordic]

Literally nothing in console.

[aaclage]

ok use key F12 from your browser to retrieve the browser "developer tools" then select tab "console" to see the logs

[mgordic]

Already did that :) There is nothing. And looks totally different than the one on official site

Here is my code:

[aaclage]

I will give a look but cannot reproduce from my side.

[mgordic]

Looks like a problem only exists in hosted workbench. If I deploy webpart to the app catalog, then it works.

[aaclage]

to test properly recommend to use SharePoint workbench /_layouts/15/workbench.aspx because of SharePoint dependencies

[mgordic]

Yup, I am doing exactly like that, but anyway it's not working until deploy to the App Catalog

[mgordic]

@aaclage Is it possible to extend the functionality? Right now, when you drag and drop e-mail from Outlook into web part, the e-mail got deleted from the mailbox.

[AJIXuMuK]

@mgordic - we're definitely not in charge of what happening with Outlook email when you drag emails from there.
The control, as well as page where it lives is isolated and can't impact on other apps.

[AJIXuMuK]

Please, let us know if @aaclage has answered your question.

[aaclage]

@mgordic

I made a test with my outlook and email stay there, strange behavior.
Made some research regarding this and found this was happening with a specific versions of Browsers using Chromium,
https://bugs.chromium.org/p/chromium/issues/detail?id=1066975

Some Browsers have by default object dataTransfer.dropEffect as "move" that makes the behavior that you are having, move file and delete mail from outlook.
https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/dropEffect

I saw that last version of Chrome (used 89.0.4389.90) change this behavior on my browser to "none".

@AJIXuMuK
Since the control is using the out of the box from the browser.
I will recommended to set "dataTransfer.dropEffect = 'none'" in all drag events, this avoid possible changes from Browser changing the default value and this doesn't happen.
Do you agree?

[aaclage]

@joelfmrodrigues
As follow up.
Do you think that make sense to change to "dataTransfer.dropEffect = 'none'"

[AJIXuMuK]

@aaclage - yes, we can definitely do that. I'd check the default behavior on SP document library first though.

[ghost]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 7 days. It will be closed if no further activity occurs within next 7 days of this comment. Thank you for your contributions to SharePoint Developer activities.

[joelfmrodrigues]

@mgordic thanks for all the feedback. @aaclage submitted a PR that should fix this and will be available on the next release.
If you have the chance, it would be great if you could test dev-v2 and validate if it solves your problem.

[joelfmrodrigues]

@mgordic closing this issue as a new version with this feature is now released.
Thanks for your contribution