kbsymanz/FileInputTesting.html

## FileInputTesting.html
<html>
  <head>
    <title>File Input Testing</title>
  </head>
  <body>
    <div id='app'></div>
    <script type='text/javascript' src='./elm.js'></script>
    <script>
      var node = document.getElementById('app');
      var app = Elm.Main.embed(node);
    </script>
  </body>
</html>


## Main.elm
port module Main exposing (..)

import Html exposing (Html, div, h1, h3, input, text)
import Html.App as Html
import Html.Events exposing (on, onInput, targetValue)
import Html.Attributes exposing (id, multiple, type', value)
import Json.Decode
import String


main =
    Html.program
        { init = init
        , view = view
        , update = update
        , subscriptions = subscriptions
        }


init : ( Model, Cmd Msg )
init =
    ( initialModel, Cmd.none )


subscriptions : Model -> Sub Msg
subscriptions model =
    Sub.none


type alias Model =
    { oneFilename : String
    , manyFilenames : List String
    }


initialModel : Model
initialModel =
    Model "" []


type Msg
    = OneFile String
    | MultipleFiles (List String)


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        OneFile filename ->
            let
                _ =
                    Debug.log "OneFile" filename
            in
                ( { model | oneFilename = filename }, Cmd.none )

        MultipleFiles filenames ->
            let
                _ =
                    Debug.log "MultipleFiles in update" "has been called"
            in
                ( { model | manyFilenames = filenames }, Cmd.none )


onChange : (String -> msg) -> Html.Attribute msg
onChange tagger =
    on "change" (Json.Decode.map tagger targetValue)


onChangeMultiple : (List String -> msg) -> Html.Attribute msg
onChangeMultiple taggerList =
    let
        _ =
            Debug.log "onChangeMultiple" "has been called"
    in
        on "change" (Json.Decode.map taggerList targetFiles)


targetFiles : Json.Decode.Decoder (List String)
targetFiles =
    Json.Decode.at [ "target", "files" ] (Json.Decode.list Json.Decode.string)


view : Model -> Html Msg
view model =
    div []
        [ h1 []
            [ text "Testing File Inputs" ]
        , div []
            [ h3 []
                [ text "With multiple set to False" ]
            , div []
                [ input [ type' "file", multiple False, id "oneFile", onChange OneFile ]
                    [ text "Select one file" ]
                ]
            ]
        , div []
            [ h3 []
                [ text "With multiple set to True" ]
            , div []
                -- This input does not work right yet.
                [ input [ type' "file", multiple True, id "manyFiles", onChangeMultiple MultipleFiles ]
                    [ text "Select one or more files" ]
                ]
            ]
        ]
	<html>
	<head>
	<title>File Input Testing</title>
	</head>
	<body>
	<div id='app'></div>
	<script type='text/javascript' src='./elm.js'></script>
	<script>
	var node = document.getElementById('app');
	var app = Elm.Main.embed(node);
	</script>
	</body>
	</html>
	port module Main exposing (..)

	import Html exposing (Html, div, h1, h3, input, text)
	import Html.App as Html
	import Html.Events exposing (on, onInput, targetValue)
	import Html.Attributes exposing (id, multiple, type', value)
	import Json.Decode
	import String


	main =
	Html.program
	{ init = init
	, view = view
	, update = update
	, subscriptions = subscriptions
	}


	init : ( Model, Cmd Msg )
	init =
	( initialModel, Cmd.none )


	subscriptions : Model -> Sub Msg
	subscriptions model =
	Sub.none


	type alias Model =
	{ oneFilename : String
	, manyFilenames : List String
	}


	initialModel : Model
	initialModel =
	Model "" []


	type Msg
	= OneFile String
	\| MultipleFiles (List String)


	update : Msg -> Model -> ( Model, Cmd Msg )
	update msg model =
	case msg of
	OneFile filename ->
	let
	_ =
	Debug.log "OneFile" filename
	in
	( { model \| oneFilename = filename }, Cmd.none )

	MultipleFiles filenames ->
	let
	_ =
	Debug.log "MultipleFiles in update" "has been called"
	in
	( { model \| manyFilenames = filenames }, Cmd.none )


	onChange : (String -> msg) -> Html.Attribute msg
	onChange tagger =
	on "change" (Json.Decode.map tagger targetValue)


	onChangeMultiple : (List String -> msg) -> Html.Attribute msg
	onChangeMultiple taggerList =
	let
	_ =
	Debug.log "onChangeMultiple" "has been called"
	in
	on "change" (Json.Decode.map taggerList targetFiles)


	targetFiles : Json.Decode.Decoder (List String)
	targetFiles =
	Json.Decode.at [ "target", "files" ] (Json.Decode.list Json.Decode.string)


	view : Model -> Html Msg
	view model =
	div []
	[ h1 []
	[ text "Testing File Inputs" ]
	, div []
	[ h3 []
	[ text "With multiple set to False" ]
	, div []
	[ input [ type' "file", multiple False, id "oneFile", onChange OneFile ]
	[ text "Select one file" ]
	]
	]
	, div []
	[ h3 []
	[ text "With multiple set to True" ]
	, div []
	-- This input does not work right yet.
	[ input [ type' "file", multiple True, id "manyFiles", onChangeMultiple MultipleFiles ]
	[ text "Select one or more files" ]
	]
	]
	]