An example of using elm-d3 to create a form with a file input.

FileInput.elm

-- This is how you create a form that supports file upload, and drag-n-drop.
-- From the root directory of the elm-d3 project, compile it using something
-- like the following command:
--
--   elm --make --src-dir=src `./scripts/build-flags` /path/to/FileInput.elm
--
-- Of course, replace /path/to/FileInput.elm with the path to this module.
--
module FileInput where

-- Import D3 and dump all its names into the current scope.
--
import D3(..)

-- When you render form, it will create an HTML from with a file input that you
-- can drag-n-drop files to. It will also crate a submit button. The file will
-- be POSTed to /file/upload when the form is submitted.
--
-- that's equivalent to the following:
--
--   <form action="/file/upload">
--     <input type="file />
--     <input type="submit" value="Submit" />
--   </form>
--
-- This Selection makes no assumptions about the data bound to it, so you can
-- use it with any model.
--
form : Selection a
form =
  static "form"
  |. str attr "action" "/file/upload"
  |. str attr "method" "post"
  |^ static "input"
     |. str attr "type" "file"
  |^ static "input"
     |. str attr "type" "submit"
     |. str attr "value" "Submit"


-- This is a rendered form Element. In theory, you should be able to compose
-- this with other Elm Elements, but I've never tried that out. I'm pretty sure
-- that won't work without a bit of tweaking to the renderer, but who knows?
-- Try it out!
--
formElement : Element
formElement = render 800 600 form ()

-- All Your Files Are Belong to Us
--
main = formElement