はじめに
admin-on-restはReactベースでかかれた管理画面用コンポーネント集で、REST APIを前提としていて割とデフォルトでよしなにやってくれていい感じのライブラリ。
しかし、けっこうレールがかっちりしてて、カスタマイズ性も割とあるんだけどレールを外れる際は割とめんどくさい。
そんな中で、ファイルのアップロードという基本的なことに対応してなかったりもしていて、
https://github.com/marmelab/admin-on-rest/issues/564
という状態。
とりあえずPR送るほどは洗練できてないけどとりあえず素朴にファイルアップロードができる状態はできたので記録しておく。
TL;DR
'redux-form'のField使ってコンポーネントつくって、
FormDataベースのREST Clientをかく
gist
https://gist.github.com/maruware/edcf91e08f083e9354e431ad561b6f99
問題
タイトルで"画像以外"と書いたように、画像についてはImageInputというD&Dしてサムネも展開されて、というリッチなアップローダーがある。
https://github.com/marmelab/admin-on-rest/pull/77
上記のPRの中にも記述があるが、最終的にREST Clientまわりで画像ファイルをBase64してPUTしている。
なぜかというとREST Clientで用意されている2つの実装（simple, jsonServer）がJSONリクエストベースになっているから。
しかし、動画ファイルのような大きなファイルをBase64するのは重すぎる。
ということで
- 独自にInput用のコンポーネントをつくる必要
- FormDataベースのREST Clientを実装する必要
がある。
解決
admin-on-restのドキュメントに
Writing Your Own Input Component
If you need a more specific input type, you can also write it yourself. You’ll have to rely on redux-form’s component, so as to handle the value update cycle.
https://marmelab.com/admin-on-rest/Inputs.html#writing-your-own-input-component
とあるように、
redux-formのFieldを使ってコンポーネントをつくる。
あとはFormDataベースのREST Clientをかけばいける。
くわしくはgist参照