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

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