Konwertuj React.FormEvent na BodyInit za pomocą Fable-Elmish

Question

Próbuję przesłać plik przy użyciu Fable-Elmish i Helperów reagujących. Nie mogę jednak ustalić, jak przekonwertować zdarzenie formularza, gdy plik zostanie wybrany na coś, co można wysłać do serwera za pomocą narzędzia Pobierz. To jest widok:

R.input [ 
     ClassName "input-control" 
     Type "file" 
     OnChange (fun x -> FileUploaded x.target |> dispatch) 
    ] [] 

Odpowiednia część mojego funkcji aktualizacji:

| FileUploaded file -> 
    model, Cmd.ofPromise postCsv file FetchSuccess FetchFailure 

a funkcja do wywołania API z pobierania:

let postData input = 
    let formData = FormData.Create() 
    formData.append("file.csv", input?files) 
    let defaultProps = 
     [ RequestProperties.Method HttpMethod.POST 
     ; RequestProperties.Body (formData |> unbox)] 
    promise { 
     return! Fable.PowerPack.Fetch.fetch ("/api/data") defaultProps 
    } 

jaki sposób mogę przekonwertować React.FormEvent do BodyInit, które pobierają potrzebne?

Answer 1

Okazuje się, że nie korzystałem poprawnie z API FileList. Oto rozwiązanie robocze dla metody post:

let postData input = 
let formData = FormData.Create() 
formData.append("file.csv", input?files?item(0)) 
let defaultProps = 
    [ RequestProperties.Method HttpMethod.POST 
    ;RequestProperties.Headers [unbox EncType "multipart/form-data"] 
    ; RequestProperties.Body (formData |> unbox)] 
promise { 
    return! Fable.PowerPack.Fetch.fetch ("/api/data") defaultProps 
} 

Answer 2

Konieczne będzie utworzenie nowego obiektu FormData i dołączenie do niego pliku.

let formData = FormData.createNew formData.append("file", file.[0])

Następnie zmień swoje wezwanie do postRecord przekazać formData zamiast pliku. Potrzebujesz go do zakodowania, ale przechodzisz przez surową tablicę plików.

Przynajmniej to jest moje zrozumienie z fetch example w sprawie przesyłania pliku. Poza tym post-rekord wygląda mi nie tak, czy można użyć tylko metody "postu"? postRecord sugeruje, że oczekuje typu rekordu.

Answer 3

myślę Fetch.postRecord jest Twój problem, ustawia Content-Type nagłówek application/json, gdy it should bemultipart/form-data.

Musisz użyć interfejsu API pobierania surowego, zamiast pakunku z pakietem Powerpack, coś w rodzaju like this.

Answer 4

Po przetestowaniu kodu, sprawdzanie ev.target?value ujawniło, że zdarzenie powoduje pobranie nazwy wybranego pliku. postRecord wydaje się być używane do wysyłania json do punktu końcowego. Będziesz chciał portować: https://medium.com/ecmastack/uploading-files-with-react-js-and-node-js-e7e6b707f4ef, do tego, co chcesz zrobić.