How to read Browser.Blob in Fable Elmish using drag / drop

Question

I'm trying to read the Browser.Blob object in fable elmish - I can see it done like this in javascript but I'm not sure how to handle the FileReader onload event.

var b = new Blob(...);
var fr = new FileReader();
fr.onload = function(evt) {
    var res = evt.target.result;
    console.log("onload",arguments, res, typeof res);
};
fr.readAsArrayBuffer(b);

I'm using a ondrop event to read the file list of items dropped. I can get the file name and get the blob. The function below doesn't work because I get an error on e.target.result but I don't think it would work anyway because it would return the blobstr before it could be set.

How can I read the blob string in this function?

let encodeString (filename:string) (blob:Browser.Blob) () = promise {
    try
        let mutable blobstr = ""
        Console.WriteLine(filename)
        let fs = Browser.FileReader.Create()
        fs.onload <- (fun e -> blobstr <- e.target.result)         
        fs.readAsBinaryString(blob)      
        return Result.Ok (filename,blobstr)
        //return Result.Ok (filename,"")
    with ex -> return (Error ex.Message)
}

More code from the view and update for context:

View - handling the drag and drop:

        div [   Class "card border-primary"
                Draggable true
                Style [ Height "100px" ] 
                OnDragOver ( fun e ->
                                    Console.WriteLine("hovering")
                                    e.preventDefault()
                                    NoAction |> dispatch
                )
                OnDrop ( fun e ->
                                    Console.WriteLine("dropping")
                                    e.preventDefault()
                                    let fileList= e.dataTransfer.files
                                    let files = [0. .. fileList.length - 1.]
                                                |> List.map int
                                                |> List.map (fun x -> fileList.item(float x))
                                    let fileInfos = [ 
                                        for file in files do 
                                            yield file.name, file.slice()
                                    ]
                                    FilesLanded fileInfos |> dispatch
                )                                             
        ] []

Update:

    | FilesLanded files ->
        model, Cmd.batch (
                files
                    |> List.map ( fun (x,y) -> Cmd.ofPromise (encodeString x y ) () FileLanded UnexpectedError )
        )
    | FileLanded res -> 
        match res with 
            | Ok (name,contents) ->
                Console.WriteLine(name)
                Console.WriteLine(contents)
                model, Cmd.none
            | Error err -> 
                { model with ErrorMessage= err }, Cmd.none 
    | UnexpectedError ex ->
        { model with ErrorMessage= string ex }, Cmd.none 

Thanks

Answer 1

The only way that I was able to get this working was using local storage. It's a bit hacky but it works.

Code is below for anyone who is interested.

View:

...
        div [   Class "card border-primary"
                Draggable true
                Style [ Height "100px" ] 
                OnDragOver ( fun e ->
                                    Console.WriteLine("hovering")
                                    e.preventDefault()
                                    NoAction |> dispatch
                )
                OnDrop ( fun e ->
                                    Console.WriteLine("dropping")
                                    e.preventDefault()
                                    let fileList= e.dataTransfer.files
                                    let files = [0. .. fileList.length - 1.]
                                                |> List.map int
                                                |> List.map (fun x -> fileList.item(float x))
                                    let fileInfos = [ 
                                        for file in files do 
                                            yield file.name, file.slice()
                                    ]
                                    FilesLanded fileInfos |> dispatch
                )                                             
        ] []

Update:

...
    | FilesLanded files ->
        model, Cmd.batch (
                files
                    |> List.map ( fun (x,y) -> Cmd.ofPromise (encodeImageToUrl x y ) () FileLanded UnexpectedError )
        )
    | FileLanded res -> 
        Console.WriteLine(res)
        match res with 
            | Ok img ->
                let impurl = Browser.localStorage.getItem(sprintf "imp_%s" img.FileName).ToString()
                printfn "successfully read file: %s - %s" img.FileName img.DisplayUrl                    
                let imgWithUrl = { img with DisplayUrl= impurl }
                { model with ImportingImages= List.append model.ImportingImages [  imgWithUrl ] }, Cmd.none
            | Error err -> 
                { model with ErrorMessage= err }, Cmd.none 

Reading Image:

    let encodeImageToUrl (filename:string) (blob:Browser.Blob) () = promise {
        try
            printf "%s: %f" filename blob.size
            let fs = Browser.FileReader.Create()
            fs.onload <- (fun e -> 
                                printf "reader returned"
                                let res= e.target?result
                                Browser.localStorage.setItem(sprintf "imp_%s" filename, res)
                                )         
            fs.readAsDataURL(blob)   
            //the bloburl is empty at this point, we pull the actual url in the update method from local storage   
            return Result.Ok { FileName= filename; ImageBlob= blob; DisplayUrl= bloburl }
        with ex -> return (Error ex.Message)
    }