f# - How to send binary data from local disc on Client to Server using Fable Remoting?

Question

In my SAFE stack app, I need to send some Excel files from the Client to the Server.

My Fable.Remoting function signature is

UploadFiles: SecureInteraction<byte[], unit>

I am loading the files into client (which is made with Fulma) like this

Field.div [] [
    File.file [] [
        File.label [] [
            File.input [
                GenericOption.Props [
                    OnInput (fun ev ->
                        ev.target?files |> Seq.length |> ExpectFileCount |> dispatch

                        ev.target?files |> Seq.iter (fun file ->
                            let reader = Browser.Dom.FileReader.Create()
                                                
                            reader.onload <- fun evt ->
                                dispatch (SaveFileContent evt.target?result)
                                                
                            reader.onerror <- fun evt ->
                                dispatch ErrorReadingFile
                                                
                            reader.readAsText(file)
                        )
                        //let file = ev.target?files?(0)

                                            
                    )
                    Props.Multiple true
                ]
            ]
            File.cta [] [
                str "Choose a file..."
            ]
        ]
    ]
]

If I interpret the file contents as a string using System.Text.Encoding.UTF8.GetString then I get it to display a bunch of nonsense, which makes me think the binary data is loaded into memory.

However, when I try to send it to the server it get the following Client error

TypeError: source$$1.map is not a function

The server never receives anything at all. How do I use fable remoting to send binary data from the client to the server?

question from:https://stackoverflow.com/questions/65862841/how-to-send-binary-data-from-local-disc-on-client-to-server-using-fable-remoting

Answer 1

Found a* solution.

ev.target?files |> Seq.iter (fun file ->
    let reader = Browser.Dom.FileReader.Create()

    reader.onload <- fun evt ->
                                                    
        Browser.Dom.window.btoa(evt.target?result) |> SaveFileContent |> dispatch

    reader.onerror <- fun evt ->
        dispatch ErrorReadingFile
                                                
    reader.readAsBinaryString(file)
)

This sends a base64 encoded string to the update function which I can then send to the server to decode. Or I suppose I could decode in the client and send a byte array to the server. But not sure if there is a way to just get the binary data directly from the reader.

*There could be a better solution