inputタグのtype='file'のvalue属性は変更できない

ファイルについて

https://developer.mozilla.org/ja/docs/Web/API/File/Using_files_from_web_applications

htmlのinputタグからfileListに格納されるファイル群

問題

type='file'のinputタグのvalue(というのは存在しないが)に対して、JavaScriptで変更を加える事はできなかった。

例えば、以下のような感じ

タグ

<input type="file" id="input-file" />

script

const file = makeFile(IMAGE_DATA) // imgデータをfileに変換する処理
const $inputFile = document.getElementById('input-file')
$inputFile.setAttribute('value', file)

こういった変更などがセキュリティ上できません。
これができてしまうと、自由なファイルを外部からセットしてフォームで送られてしまうためです。

解決策

<button type="submit">送信</button>

submit用のボタンでフォームを送信するのではなく
File APIで作られたfileをfetchでPOSTする。

const fd = new FormData()
fd.append('inputFile', file)

fetch('URL', {
  method: 'POST',
  body: fd
})

今回はファイルだけを送信していますが、恐らく他のinput情報も送信されるかと思いますが、同様にappendして送信するので要領的には同じような感じで実行できると思います。

参考

https://www.hos.co.jp/blog/20180129/