A single file input.

import Html exposing (Html)
import ValuableFile exposing (ValuableFile)
import ValuableFile.Input as Input

type Msg
    = FileSelected File

view : Html msg
view =
    Input.file
        [ Input.onFile FileSelected
        , Input.accept "application/json"
        ]
        []

This is an Html.input with Html.Attributes.type_ "file" preset for convenience.

To style the input, hide it and use a label:

import Html.Attributes

view : Html msg
view =
    div []
        [ Input.file
            [ Input.onFile FileSelected
            , Attributes.id "file-upload"
            , Attributes.style "display" "none"
            ]
            []
        , Html.label
            [ Attributes.for "file-upload"
            , Attributes.style "padding" "16px"
            , Attributes.style "border" "1px solid grey"
            , Attributes.style "cursor" "pointer"
            ]
            [ Html.text "Upload"
            ]
        ]

Detect change events on file input. It will grab the value from event.target.files as a single file.

A multiple files input.

import Html exposing (Html)
import ValuableFile exposing (ValuableFile)
import ValuableFile.Input as Input

type Msg
    = FilesSelected (List ValuableFile)

view : Html msg
view =
    Input.files [ Input.onFiles FilesSelected ] []

This is an Html.input with Html.Attributes.type_ "file" and Html.Attributes.multiple true preset for convenience.

Detect change events on multiple files input. It will grab the value from event.target.files.