reppners / ngx-drag-drop

Angular directives using the native HTML Drag And Drop API
https://reppners.github.io/ngx-drag-drop/
BSD 3-Clause "New" or "Revised" License
299 stars 118 forks source link

No Data on external file drop #48

Closed bkarv closed 5 years ago

bkarv commented 5 years ago

First of all many thanks for the plugin, it's powerful but simple to use. Describe the bug When trying to drop external file from directory in Angular 6+, where do I get the file data/link? You can see what the onDrop event object looks liken in screenshot. The data object is undefined.

To Reproduce

<div style="height:100px;background-color: black;width: 100px" dndDropzone [dndAllowExternal]="true"
         (dndDragover)="onDragover($event)"
         (dndDrop)="onDrop($event)">

    dropzone 

    <!--optional placeholder element for dropzone-->
    <!--will be removed from DOM on init-->
    <div style="border: 1px orangered solid; border-radius: 5px; padding: 15px;"
         dndPlaceholderRef>
        placeholder
    </div>

  </div>

Expected behavior There needs to be some kind file event data similar to when we do it manually in html: <input style="display:none;" type="file" (change)="fileEvent($event)" multiple #file>

Screenshots onDrop event object

screen shot 2018-10-27 at 9 49 23 am

Desktop (please complete the following information):

Additional context I am using Ionic 4 in Chrome browser but as it is now pretty decoupled and ultimately straight angular 6 it should be work as per angular 6.1.5.

reppners commented 5 years ago

Welcome and thanks for the detailed report 👍

The data property is only used for data set by a dndDraggable. Sorry for not having documented this explicitly. Will improve docs so it's clear!

External drop events are merely transported in the event property and should be used directly when isExternal==true but your screenshot shows it's a mouse event which is confusing to me. There should be only DragEvent instances in there - maybe it's just a red herring as DragEvent may inherit from MouseEvent?

You can check an example of handling external drop events here: https://github.com/reppners/ngx-drag-drop/blob/master/demo/app/native/native.component.ts

reppners commented 5 years ago

Updated the API in the README to explicitly state how external drops should be handled https://github.com/reppners/ngx-drag-drop/blob/c2617b8ca9b550497685b00a2255871013bdbd44/README.md#api

bkarv commented 5 years ago

Thanks mate, using the example https://github.com/reppners/ngx-drag-drop/blob/master/demo/app/native/native.component.ts It worked! I think it was an issue with the console log now properly displaying the data but now confirmed it works as expected. You are a legend!