locked
[UWP][HTML] Accepting Drag and Drop Files RRS feed

  • Question

  • The UWP drag and drop documentation found here: https://msdn.microsoft.com/en-us/windows/uwp/app-to-app/drag-and-drop describes how to accept an file via drag and drop from another app on Windows 10 XAML.  I am attempting to achieve this functionality in an HTML/JavaScript app, although I cannot find any documentation as to how or even if this is supported.  I have tried using the standard HTML5 drag/drop events (see here: http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-selecting-files-dnd ).  This works good in MS Edge, but within a UWP app I only get the black "no" cursor.

    Does anybody know if drag and drop for Files is possible in a UWP HTML/JavaScript app?

    Wednesday, March 9, 2016 6:53 PM

Answers

  • Upon further investigation, I have found that drag/drop in a JS app DOES work as Elvis' example shows IF the CPU architecture is set for "Any CPU" or "x64" (I have not tested ARM). However, when set for x86, Drag and Drop no longer works, showing only the "no" cursor.  If anybody else is seeing similar behavior, then it seems like a strange bug to me.
    • Proposed as answer by Krunal Parekh Wednesday, March 23, 2016 2:31 AM
    • Marked as answer by Krunal Parekh Friday, March 25, 2016 6:48 AM
    Thursday, March 10, 2016 12:30 PM

All replies

  • Hi Brandon,

    I've made a demo UWP App using the HTML5 API (from here: http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-selecting-files-dnd). It works just fine.

    below is the link for my Demo :

    Drag and Drop Sample

    The main codes are in default.js inside the "app.onactivated" function.

    hope it works for you,

    Best Regards

    Thursday, March 10, 2016 4:05 AM
  • Hello,

    >>Does anybody know if drag and drop for Files is possible in a UWP HTML/JavaScript app?

    I was able to reproduce the issue mentioned i will further look into it. 


    Thanks MSDN Community Support Please remember to Mark as Answer the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Thursday, March 10, 2016 6:57 AM
  • Hello Elvis Xia,

    >>I've made a demo UWP App using the HTML5 API (from here: http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-selecting-files-dnd). It works just fine.

    I tested the same on my side but it is showing "no" cursor . Could you explian your working scenario. Perhaps i missed something. 

    With Regards,

    Krunal Parekh 


    Thanks MSDN Community Support Please remember to Mark as Answer the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Thursday, March 10, 2016 6:59 AM
  • Upon further investigation, I have found that drag/drop in a JS app DOES work as Elvis' example shows IF the CPU architecture is set for "Any CPU" or "x64" (I have not tested ARM). However, when set for x86, Drag and Drop no longer works, showing only the "no" cursor.  If anybody else is seeing similar behavior, then it seems like a strange bug to me.
    • Proposed as answer by Krunal Parekh Wednesday, March 23, 2016 2:31 AM
    • Marked as answer by Krunal Parekh Friday, March 25, 2016 6:48 AM
    Thursday, March 10, 2016 12:30 PM
  • Hi Brandon,

    I ran into exactly the same issue: HTML5 drag and drop does not work when running as x86. I get the red "drag not allowed" icon when dragging, then the app becomes unresponsive. It does work when running as x64.

    For reference, the thread started by me: https://social.msdn.microsoft.com/Forums/Windowsapps/en-US/44ac6dd3-bb66-4c98-8464-13391c666806/xamluwp-javascript-html5-drag-and-drop-not-working-in-an-embedded-webview?forum=wpdevelop

    Friday, March 11, 2016 7:15 AM
  • You can send feedback or report bug using feedback tool. 

    Please see: Updates and feedback

    With Regards,

    Krunal Parekh 


    Thanks MSDN Community Support Please remember to Mark as Answer the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Wednesday, March 23, 2016 2:32 AM