Fable-Elmishを使用してReact.FormEventをBodyInitに変換します

Question

Fable-ElmishとReact Helpersを使用してファイルをアップロードしようとしています。しかし、ファイルがFetchを使用してサーバーに送信できるものに選択されたときに、フォームイベントを変換する方法を考えることはできません。これは図である。

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

私の更新機能の対応する部分：

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

フェッチでAPIを呼び出す関数：

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 
    } 

どのように変換することができますすることができますReact.FormEventをBodyInitにインポートする必要がありますか？

Answer 1

私はFileList APIを正しく使用していませんでした。 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

新しいFormDataオブジェクトを作成し、それにファイルを追加する必要があります。

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

その後FORMDATAの代わりにファイルを渡すためにpostRecordにお電話を変更します。エンコードするにはフェッチが必要ですが、ファイルの生の配列を渡すだけです。

少なくとも、アップロードするファイルはfetch exampleです。また、ポストレコードは私には間違って見えます。使用できるポストメソッドはありますか？ postRecordは、レコード型を予期していることを意味します。

Answer 3

私が思うFetch.postRecordはそれがapplication/json、it should bemultipart/form-dataにContent-Typeヘッダーを設定し、あなたの問題です。

パワーパックラッパーの代わりにraw fetch APIを使用する必要があります。like thisです。

Answer 4

コードをテストすると、ev.target?valueをチェックすると、イベントが選択したファイルの名前を取得するだけであることがわかりました。 postRecordは、jsonをエンドポイントに送信するために使用されているようです。あなたは、あなたがしたいことに移植：https://medium.com/ecmastack/uploading-files-with-react-js-and-node-js-e7e6b707f4efするつもりです。