elmでファイルをアップロードできるフォームを作成するには

Question

私はelmに画像とそれに付随するデータをアップロードできるフォームを作成しようとしています。

現在、すべてのフィールドがonInput関数を使用してモデルを更新しています。送信ボタンを押すと、Http.post関数を使用してデータをJSONとして送信します。もし私がよく分かっているのであれば、これはエルムの形をする慣用的なやり方です。

このような形式のファイルアップロード機能を追加する方法はありますか？可能であれば、標準のhtml要素に頼らずにelmアプリケーションを制御して、送信したいと考えています。

Answer 1

ここにあります。私のノートのいくつか：

• http://simonh1000.github.io/2016/12/elm-s3-uploads/
  • https://github.com/simonh1000/file-reader
• https://github.com/danyx23/elm-dropzone
  • https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop
• File Upload in Elm
• elm: read file content
• https://www.paramander.com/blog/using-ports-to-deal-with-files-in-elm-0-17
• https://github.com/elm-lang/html/issues/20
  • https://github.com/lovasoa/elm-fileinput
• https://www.reddit.com/r/elm/comments/4926am/uploading_files_through_elmhttp/
• http://elm-ui.info/documentation/guides/handling-files
• How to trigger click event in elm
のサポートを追加します。

Answer 2

はい、ネイティブコードは二つのことのために必要とされる：FileReaderのAPIにアクセスするために

• 。
• は、Http ilbraryを「騙して」マルチパートフォームにファイルを追加できるようにします。

これはすべて、rofolによって記述されたfilereaderライブラリに付属するthis blog postでカバーされています。

ネイティブコードの代わりに、もちろんポートを使用できます。