Form.DropZone

Module to add a file DropZone to your app

Initialise and update

Add a DropZone.Model to your model.

type alias MyModel =
    { myDropZone : DropZone.Model
    }

init : Model

Add a DropZone.Model to your model.

myInitialModel : MyModel
myInitialModel =
    { myDropZone = DropZone.init -- optionally pipe into State Setters
    }

type Msg

Add a DropZone.Msg to your Msg.

type MyMsg
    = UpdateMyDropZone DropZone.Msg

update : Msg -> Model -> Model

Use in your update function.

myUpdate : Msg -> Model -> (Model, Cmd Msg)
myUpdate msg model =
    case msg of
        UpdateMyDropZone dropZoneMsg ->
            { model | myDropZone = DropZone.update dropZoneMsg model.myDropZone } ! []

View and render

view : Model -> View

Transform an DropZone.Model into an DropZone.View, which allows us to pipe View Setters on it.

myView : Model -> Html Msg
myView model =
    div
        []
        [ DropZone.view model.myDropZone -- pipe view setters here, for example |> setIsLocked 'your logic here'
        ]

render : View -> Html Msg

Transforms an DropZone.View into Html DropZone.Msg

myView : Model -> Html Msg
myView model =
    div
        []
        [ DropZone.view model.myDropZone
            |> DropZone.render
            |> Html.map UpdateMyDropZone
        ]

State Setters

reInitialise : Model -> Model

ReInitialise your DropZone.Model.

reset : Model -> Model

Reset your DropZone.Model.

setInitialValue : List File -> Model -> Model

Set the initial files of your DropZone.Model.

setValue : List File -> Model -> Model

Change the files of your DropZone.Model.

View Setters

setIsError : Bool -> View -> View

Set whether your input is in error mode (red border).

setIsLocked : Bool -> View -> View

Set whether your input is locked (disabled).

setLabel : String -> View -> View

Set the label for your DropZone.

Getters

getIsChanged : Model -> Bool

Whether your DropZone was changed. Useful if you want to disable save buttons unless there were changes etc.

getFiles : Model -> Files

Get the current value of your DropZone. This is what you'd use to display the data somewhere outside of your DropZone, or to send the files to the backend for example etc.

type alias Files =

{ ok : List OkFile

, err : List ErrFile

}

List of files that imported properly and list of files that didn't

type alias OkFile =

{ lastModified : Time

, name : String

, size : Int

, mimeType : String

, base64 : String

}

File that imported successfully

type alias ErrFile =