CustomElement.FileListener

The Elm interface to the file-listener custom element.

This code won't do anything unless site/js/file-listener.js is loaded.

Types

type alias File =

{ name : String

, lastModified : Int

, mimeType : String

, size : Int

, data : String

, dataUrl : String

}

onLoad receives a File instance from the JS code.

data is a binary string, containing the file contents.

dataUrl is a data: URL that you can use as the src of an img element to display the image.

type alias Id =

String

Convenience type.

HTML Elements

fileListener : List (Attribute msg) -> List (Html msg) -> Html msg

The custom file-listener element.

It's invisible, but it adds an event listener to the asociated <input type='file' id='fileId' /> element to fetch the contents of the file, and generate a "load" event containing the contents and other information.

fileInput : Id -> List (Attribute msg) -> List (Attribute msg) -> Html msg

Create a input element of type file with the given Id and the first list of attributes.

Connect a file-listener element to it, with the second list of attributes.

All bundled up in an enclosing span element.

Attributes

fileId : String -> Attribute msg

You need to set the fileId attribute to the id of an input of type file.

Not necessary if you use fileInput to create the two elements, since it will connect the file-listener element to the input element for you.

Events

onLoad : (File -> msg) -> Attribute msg

This is how you receive file content and other information.

Convenience Functions

multipartFormContentType : String -> String

Turn a boundary string into a multipart/form-data mime type.

This is suitable as the first parameter to Http.stringBody.

multipartFormData : String -> File -> String

Turn a boundary string and a File into the body of a multipart form post.

This is suitable as the second parameter to Http.stringBody.

crlf : String

Two-character string: carriage return, line feed

billstclair/elm-custom-element/1.1.0