DropZone

This library makes it easier to use Html5 Drag/Drop events when you want to support dropping of files into a webpage.

Main DnD support

dropZoneEventHandlers : Decoder msg -> List (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
        ]

Drop action

type DropZoneMessage a

= DragEnter

| DragLeave

| Drop a

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.

Model

type alias Model =

{ hoverState : HoverState }

Opaque model of the DropZone.

Helper functions

init : Model

Initializes the Model

update : DropZoneMessage msg -> Model -> Model

Updates the Model from a DropZoneMessage.

isHovering : Model -> 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)

Modules

DropZone