Chrome（ブラウザ）で選択したファイルを変更後にAJAXでファイルを再アップロードすると、net :: ERR_UPLOAD_FILE_CHANGEDが発生する。

概要

htmlでinput type="file"を利用し連続してファイル選択してをAjaxでアップロードする処理で発生したエラーの備忘です。

HTMLの構成

以下のようなファイルを選択の仕組みで一度ファイルを選択した後にAjaxを用いてアップロードを起こった後、

選択したファイルの内容をエディタなどで変更して再度、アップロードを行うとエラーが発生します。

<input type='file' id='file-01'>

エラーメッセージ（ERR_UPLOAD_FILE_CHANGED）とその原因

Failed to load resource: net::ERR_UPLOAD_FILE_CHANGED

もう既にこのエラーメッセージから色々想像がつくと思いますが、調べてみるとやっぱり天下のstackoverflow、さすがです。

Re-uploading a file with AJAX after it was changed causes net::ERR_UPLOAD_FILE_CHANGED in Chrome

ERR_UPLOAD_FILE_CHANGEDの解決方法

さっと見た感じ結論としてブラウザの仕様みたいな感じなので、やはり選択後に選択値をクリアするか、エラーの内容解析して再選択してもらうようにアナウンスするかどっちかかなぁと思います。

エラーはjQueryでAjaxを使う感じだとfailに入ってくるので、引数のエラーオブジェクト解析して処理を振り分けるとかですかね。

$.ajax({
  type: 'POST',
  url:  'endpoint',
  data: 'formdata',
}).done(function(data, textStatus, jqXHR){
}).fail(function(jqXHR, textStatus, errorThrown){
  // ★ここ
});

一応ブラウザはChromeしか試してません。
少なくともEdgeは一緒でしょうが、他はどの様な動きをするのでしょうかねぇ。

参考

• Chrome エラー対処リスト

  • net::ERR_UPLOAD_FILE_CHANGED

  • net::ERR_FILE_NOT_FOUND

  • net::ERR_CERT_DATE_INVALID

Chrome Developer Tools 入門 (技術の泉シリーズ（NextPublishing）)

フォローお願いします！

@marine_menta