drag&drop file from html panel to active document

Hello,

Let's say I have a exemplary html panel with image:

<div id="test"><img src="test.jpg"  data-source="here is path to my locall file" id="drag_div" draggable="true" ></div>

What i'm trying to do is to allow user to drag this image form panel and drop it to active document's body as a new layer.

Refering to CEP_7.0_HTML_Extension_Cookbook:

CEP 5.2 support HTML 5 Drag and Drop. There are four types.

1.Drag and drop inside HTML extension.

2.Drag and drop between two HTML extensions

3.Drag and drop between HTML extension and itshost application.

4.Drag and drop between HTML extension and operating system(e.g. Desktop or Browser).

As I understand the third option gives me this possibility but I don't know how to use it. I wasn't even able to get any callback from photosop after dropping html element to application's body.

I appreciate any help

Regards,

Dominik