locked
[UWP][JavaScript] How to attach a StorageFile for a drag event? RRS feed

  • Question

  • Hi,

    I have a StorageFile object in memory. When user wants to drag the target HTML element, I need to pass the StorageFile object into the drag event, so the file can be dropped to other apps like File Explorer (say copying a file to a folder), or Facebook page of a browser (say uploading a file).

    How can I set the StorageFile data into the drag event for the communication from my UWP app to other apps?
    It seems I can't use the .setData in the original drag and drop events in JavaScript.

    This app I'm developing is written entirely in HTML/CSS/JavaScript. Is there any UWP-tricks on the original JavaScript Drag and Drop API? Or, is there any UWP-documented API functions I can call to handle the case?

    Thanks for your help!

    Sunday, March 18, 2018 4:58 PM

All replies

  • Hi  Dexter.L,

    I am trying to involve someone familiar with this topic to further look at this issue. There might be some time delay.

    Thank you for your understanding

    Best Regards,

    Yong Lu


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Monday, March 19, 2018 10:09 AM
  • Hi Dexter,

    >>I have a StorageFile object in memory. When user wants to drag the target HTML element, I need to pass the StorageFile object into the drag event, so the file can be dropped to other apps like File Explorer (say copying a file to a folder), or Facebook page of a browser (say uploading a file).

    It is possible to drag it to other UWP apps, or other apps, which are able to read the data from Clipboard(UWP is able to paste the object into Clipboard). For details, please refer to https://docs.microsoft.com/en-us/windows/uwp/app-to-app/copy-and-paste.

    But it is not possible to drag the data into File Explorer or an existing apps like Facebook page or other existing desktop apps.

    For File Explorer:

         When you drag an item out from UWP app  to File Explorer, you will need to create an empty file first, then copy the data into it. The create file step can not be done silently/programmatically in UWP.

    For other existing apps:

         Since other apps expects a file by default. It will not accept the object in memory directly.

    Workaround:

        You need to use a FileSavePicker  to save a file to your disk. For details, please refer to https://docs.microsoft.com/en-us/uwp/api/windows.storage.pickers.filesavepicker, this is the C# documentation, but you can use the API directly in UWP(JS) project using full name of the class(ex: var picker= new Windows.Storage.Pickers.FileSavePicker() ).

    Best Regards,

     Elvis Xia
    Wednesday, March 21, 2018 3:41 AM
  • Thanks for you answer.

    I've read the Copy-and-paste article, but that is really the copy and paste and not related to drag and drop.

    In JavaScript, a "dragstart" event is triggered when the user starts to drag an object, not using the Clipboard data.

    Usually, we attach the data to be transferred using the event's setData() method.

    Can we set a StorageFile object using the setData() method?

    Or, is there any UWP JavaScript APIs that could handle File, Blob or StorageFile objects which allow data transfer through drag and drop?

    I'm looking a way that is similar in https://docs.microsoft.com/en-us/windows/uwp/design/input/drag-and-drop but work with HTML elements with JavaScript.

    Thanks.


    • Edited by Dexter.L Sunday, July 22, 2018 5:33 PM
    Sunday, July 22, 2018 5:33 PM
  • A bit late to this, but what OP needs, I think, is 

    MSApp.createFileFromStorageFile(file)

    This creates a standard JavaScript file handle from a UWP StorageFile.

    However, what I need is the opposite. I want to create a UWP StorageFile from a JavaScript file handle. Is there any MSApp function that does this? E.g. a user has picked a file using standard HTML file picker, and we convert that into a UWP StorageFile.

    Sunday, May 5, 2019 10:49 AM