feat(InputFile): multipleでファイルを追加していけるように変更

[Qs-F]

関連URL

概要

InputFileでmultipleのときにファイルを追加していけるようにした

変更内容

• InputFileでmultipleのときにファイルを追加していけるようにした

確認方法

以下をsandbox内などにおき試してみる

<form
  onSubmit={
    (e) => {
      e.preventDefault()
      const formData = new FormData(e.currentTarget)
      console.log(formData.getAll('files'))
    }
  }
>
  <InputFile multiple label="Files" name="files" />
  <button type="submit">submit</button>
</form>

[pkg-pr-new]

Open in Stackblitz

npm i https://pkg.pr.new/kufu/smarthr-ui@5281

commit: 192d1e5

[Qs-F]

メモ: レビューしやすいように変更を最小限にした

[AtsushiM]

この仕様は議論の余地がありそう。
Chromeなどのブラウザ実装では

• 一度目に選んだファイルは、二度目に選ばれたファイル群と結合されない

つまりイメージとしては都度渡された配列を結合するのではなく、常に上書きされます。
個人的にはmultipleを実装するならブラウザデフォルトの動きに合わせたいです。
もしユースケースとして結合させたい場合があるなら、属性名はmultiple以外にしたいです（最終的にinput[file][multiple]が出力されるとしても、デフォルトではない挙動をするなら、コンポーネントとしての属性は別の名前
にしておいたほうが事故はすくなるなるかと...）

[Qs-F]

なるほどです！ユースケース的にはこの挙動自体は以前定例で話した通り、他のプロダクトでもある認識です〜
props名はたしかに感あるので、 multiple & appendable のときにこの挙動をする、とかだとどうでしょう？

[AtsushiM]

↑良さそう
ただ実際問題として multiple だけで設定することがないような気がする...
雑ですが multiAppendable みたいな1属性で設定してもいいかもですね...