File Upload using Fable-Elmish

Question

I want to upload a file to my Fable-Elmish, end so that I can then send it to the server for processing. However, I can't find any documentation / samples to cover this. This is my update function:

let update msg model : Model * Cmd<Msg> =
    match msg with
    | QueryResults ->
        {model with results = None}, Cmd.ofPromise getData "" FetchSuccess FetchFailure
    | FetchSuccess data -> 
        { model with results = Some data }, []
    | FetchFailure ex ->
        Browser.console.log (unbox ex.Message)
        Browser.console.log "exception occured" |> ignore
        model, []
    | FileUploaded ->
        Browser.console.log "file selected!" |> ignore
        model, []

And this is the part of the view function containing the file upload:

R.input [
        Type "file"
        OnChange (fun x -> FileUploaded |> ignore)
    ] []

As far as I can tell, this should trigger the update and print out "file uploaded!" to the console, but nothing is happening.

If anyone could point me in the right direction here that would be great.

Answer 1

You're passing the FileUploaded message to ignore, which does just what its name says: ignore its arguments and do nothing. So that message won't actually go anywhere.

With Fable-Elmish, your view function takes an argument called dispatch, which is a function that will take a message and put it into the message queue (so that update will receive the message at some later time). Look at the TodoMVC sample, and especially the onEnter and viewModel functions, for details.

Basically, your OnChange (fun x -> FileUploaded |> ignore) line should have been OnChange (fun x -> FileUploaded |> dispatch) instead.