Elmでファイル(画像またはExcel)をアップロードするにはどうすればよいですか?
例が見つからないようです。
ネイティブコードを使用している場合でも、答えは問題ありません。 Elm-Html
でData
を見たことがありますが、ファイルとBLOBはサポートされていないようです。これを回避する方法は何ですか?
私はMisterMetaphorが参照するライブラリの作者です。彼が説明するよりも使いやすいです。例でElm-package.jsonを設定する方法を見てください: https://github.com/simonh1000/file-reader/blob/master/example/Elm-package.json - "native-modules": true,
を追加するだけです。
私は blog を作成して、0.18のコードのリリースをサポートし、たとえば、 S3はElmで実行できます。
それを行う公式の方法は現在 https://package.Elm-lang.org/packages/Elm/file/latest/
これは、Elm0.19で追加されたものです。
現在、公式のHttpパッケージもそれをサポートしています。これが https://package.Elm-lang.org/packages/Elm/http/latest/Http#request の例です。
import File
import Http
type Msg = Uploaded (Result Http.Error ())
upload : File.File -> Cmd Msg
upload file =
Http.request
{ method = "PUT"
, headers = []
, url = "https://example.com/publish"
, body = Http.fileBody file
, expect = Http.expectWhatever Uploaded
, timeout = Nothing
, tracker = Nothing
}
file-reader のようなライブラリを使用します。
かなり包括的な例のセットがあります。 これ から始めることができます。
ただし、注意点があります。このライブラリはいくつかのネイティブコードを使用しているため、公式パッケージリポジトリから取得することはできません。したがって、手動でインストールする必要があります。
この目的のために、私は このハッキーなElm-パッケージインストールの置き換え と書きました。プロジェクトのルートディレクトリにexact-dependencies.json
ファイルが必要です。このファイルは、プロジェクトのビルド時にElm-stuff
が作成するElm-package
ディレクトリから最初に取得できます。次に、次のようにfile-reader
パッケージへの参照をexact-dependencies.json
ファイルに追加します。
{
"evancz/Elm-effects": "2.0.1",
"evancz/virtual-dom": "2.1.0",
"evancz/Elm-http": "3.0.0",
"evancz/start-app": "2.0.2",
"evancz/Elm-html": "4.0.2",
"Elm-lang/core": "3.0.0",
"simonh1000/file-reader": "1.0.0"
}
また、file-reader
への参照をElm-package.json
ファイルに追加する必要があります。
{
"version": "1.0.0",
"summary": "helpful summary of your project, less than 80 characters",
"repository": "https://github.com/user/project.git",
"license": "BSD3",
"source-directories": [
"."
],
"exposed-modules": [],
"dependencies": {
"Elm-lang/core": "3.0.0 <= v < 4.0.0",
"evancz/Elm-effects": "2.0.1 <= v < 3.0.0",
"evancz/Elm-html": "4.0.2 <= v < 5.0.0",
"evancz/Elm-http": "3.0.0 <= v < 4.0.0",
"evancz/start-app": "2.0.2 <= v < 3.0.0",
"simonh1000/file-reader": "1.0.0 <= v < 2.0.0",
},
"Elm-version": "0.16.0 <= v < 0.17.0"
}
この後、 Elm-package install replace を実行すると、うまくいくと思います。
Elmでファイルのアップロードを処理する他のオプションは
チュートリアルはここにあります https://www.paramander.com/blog/using-ports-to-deal-with-files-in-Elm-0-17 (それはElm用だと言っています0.17ですが、Elm0.18では変更されません。
このアプローチの欠点は次のとおりです。
利点:
Elm Httpドキュメントから :「現在は文字列のみをサポートしていますが、ElmでそれらのAPIを取得するときにblobとファイルをサポートします。」