Unable to access DataTransfer from Drag and Drop event - Elm 0.17

[Ronn Ross]

I have a div within my app that is acting as a drop zone for file that are drug in from the desktop to the browser. It looks like so:

assetArea : Html Msg

assetArea =

  div [ class "asset-area"

        , onWithOptions "dragenter" (Options True True) (Json.succeed (DropEvent "dragenter"))

        , onWithOptions "dragover" (Options True True) (Json.succeed (DropEvent "dragover"))

        , onWithOptions "drop" (Options True True) (Json.map (\x -> log "whatever" x) (Json.succeed (DropEvent "drop")))

        ]

    [ text "Drop here" ]

I'm trying to get the file information to I can pass it to the server. I'm really trying to access the DataTransfer property from the targetValue in the hopes that I can get the file info. If I try something like 

, onWithOptions "dragover" (Options True True) (Json.object1 DropEvent targetValue)

Everything compiles but it now just loads the file in the browser outside of my app. Has anyone successfully done this in Elm 0.17? Thanks in advance for the help.

[Ronn Ross]

Still no luck, but I'm getting closer. The problem is I'm not sure how to build the decoder for the drop event. Dragging and dropping is working great I just need to get the file information from the drop event. In Js you can get the files array from the event using

event.data transfer.files

Within the files array there is an object for each file containing name, fileSize, etc.

I can't figure out how to decode the object being returned, nor can i find a way to see the object to start debugging. Here is my function.

assetArea : Html Msg
assetArea =
div [ class "asset-area"
, onWithOptions "dragenter" (Options True True) (Json.succeed (DropEvent "dragenter"))
, onWithOptions "dragover" (Options True True) (Json.succeed (DropEvent "dragover"))
, onWithOptions "drop" (Options True True) (Json.map (\x -> log "whatever" x) (Json.succeed (DropEvent "drop")))
]
[ text "Drop here" ]

Here is an example in Js.

https://jsfiddle.net/0GiS0/4ZYq3/

I've read the Json.decoder docs, but still having trouble. Can someone point me in the right direction?

[Joe Fontana]

Hi Ronn - did you ever figure this out?  I have a similar requirement for my app and would like to use native elm if possible.

[Ronn Ross]

I finally reached out to Evan, and he said the dataTransfer is not supported yet in Elm. I'm not sure when it will be either. I ended up using JS. So part of my page is not in Elm. I too would love to see this support added. Sorry

--
You received this message because you are subscribed to a topic in the Google Groups "Elm Discuss" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/elm-discuss/fELMwWMd1Qw/unsubscribe.
To unsubscribe from this group and all its topics, send an email to elm-discuss...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.