javascript: input fileでファイル名を変更する方法

Question

実現したいこと

スクショなどの画像の場合、下記のようなファイル名になってしまいアップロードエラーになってしまうのを改善したい。
スクリーンショット 2019-04-27 4.51.31
例えば、スクショ後にimage.pngといったように変換してアップするとアップできるのでファイル名の問題かなと思っています。

<input style="display:none;" id="myfile" accept="image/png, image/jpg, image/jpeg" type="file" name="user[image]">

知りたいこと
ファイルアップ時に、jsでファイル名をランダムでもなんでもいいので書き換える方法があればどのようにしたら良いかご教示いただけると嬉しいです。

困っていること
ファイル名を変更する方法をいろいろ調べてみたのですが、関連する記事がなく困っています。

Comments

[m.ts10806]

アップロードエラーとはどんなものでしょうか。
ちなみにファイル名変更はjsからはできません。それができたらクライアントPCへ悪いことできてしまうので。

Answer 1

ファイルアップ時に、jsでファイル名をランダムでもなんでもいいので書き換える方法
ファイル名を変更する方法

ブラウザ内で ファイルそのものをリネームすること はできませんが、別名通知 という方法はあります。

ネイティブ実装された XMLHttpRequest や fetch は Ajax の送信データに FormData を利用できます（CSP : Content-Security-Poricy 次第ですが）。

新しい FormDataオブジェクト を作成し、フォームの各フィールドをFormData.set() や FormData.append() で個々に追加するのですが、FileList の各 File（Blob の派生オブジェクト）は、第三引数に任意の別名を指定できます。

---

たとえば、ブラウザで動的生成した Canvas 画像を Blob 化してサーバーにアップロードする場合には第二引数 を Blob にし、第三引数に任意の名前を指定することになりますが、「Canvas FormData upload」で検索すると色々とヒットするはずです。

実装に当たっては、以下のオブジェクトについて再確認してください。

• FileList
• File
• Blob
• FormData