Как читать Browser.Blob в Fable Elmish с помощью перетаскивания

Question

Я пытаюсь прочитать объект Browser.Blob на языке fable elmish - я вижу, как это делается в javascript, но я не уверен, как обработать событие загрузки FileReader.

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);

Я использую событие ondrop, чтобы прочитать список пропущенных файлов.Я могу получить имя файла и получить блоб.Приведенная ниже функция не работает, потому что я получаю ошибку на e.target.result, но я не думаю, что она все равно сработает, потому что она вернет blobstr до того, как ее можно будет установить.

Как я могу прочитать строку большого двоичного объекта в этой функции?

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)
}

Больше кода из представления и обновление для контекста:

Просмотр - обработка перетаскивания:

        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
                )                                             
        ] []

Обновление:

    | 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 

Спасибо

Answer 1

Единственный способ получить эту работу - использовать локальное хранилище.Это немного странно, но работает.

Код ниже для всех, кто интересуется.

Просмотр:

...
        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
                )                                             
        ] []

Обновление:

...
    | 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 

Чтение изображения:

    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)
    }