This library makes it easier to use Html5 Drag/Drop events when you want to support dropping of files into a webpage.
dropZoneEventHandlers : Json.Decode.Decoder msg -> List (Html.Attribute (DropZoneMessage msg))
Returns a list of Attributes to add to an element to turn it into a "Dropzone" by registering the required event handlers.
The Json.Decoder you pass in is used to extract the data from the drop operation.
If the drop operation is a user dropping files in a browser, you will want to
extract the .dataTransfer.files content. The FileReader project
( https://github.com/simonh1000/file-reader ) provides a convinience function
parseDroppedFiles
to do this for you.
view : Message -> Model -> Html
view address model =
div
(dropZoneStyle model.dropZoneModel
:: dragDropEventHandlers Json.value
)
[ renderImageOrPrompt model
]
The Drop actions is usually tagged with a (List NativeFile) that represent the files the user dropped onto the element. Handle this action in your code and do something with the files.
{ hoverState : HoverState }
Opaque model of the DropZone.
init : Model
Initializes the Model
update : DropZoneMessage msg -> Model -> Model
Updates the Model from a DropZoneMessage.
isHovering : Model -> Basics.Bool
Function that tells you if the user is currently hovering over the dropzone with a Drag operation.
This information is stored inside the model and thus isHovering can only give you a correct information if you attached the event handlers to the dropzone you render and make sure that Dropzone DropZoneMessages are "routed" to the update function of the DropZone
getDropZoneAttributes : DropZone.Model -> List Html.Attribute msg
getDropZoneAttributes dropZoneModel =
( if (DropZone.isHovering dropZoneModel) then
style [( "border", "3px dashed red")]
else
style [( "border", "3px dashed steelblue")]
)
::
dragDropEventHandlers payloadDecoder)