GCSにファイルをアップロードできなくて試行錯誤した話

GAEでファイルをアップロードすると60秒問題があるので、GCSにダイレクトにアップロードする方法を実装しようとして、なかなかできなくてかなり試行錯誤した。

最初、ここに書いてあるやり方で実装してみた。

≫GAE/jでファイルを扱う Part2 - Qiita

そうすると、GCSにPOSTした時点で、サーバー側でOutOfMemoryErrorが発生してしまう。

OutOfMemoryErrorどうやったら出なくなるんや。
たかだか10kbのファイルのアップロードなのに。
enctype書いてもOutOfMemoryError出るし。https://t.co/yKlQUg6LnT pic.twitter.com/Kv6TSuS5Fz

— さわださとし (@satoshis) 2018年1月5日

こういうときは初心に帰るのが早い。

シンプルなHTMLにformを書いてGCSのURLを指定してsubmitしたら、難なくアップロードできた。

<form id="uploadFiles" action="${url}" method="post" enctype="multipart/form-data">
 <input type="file" name="image"  >
 <input type="submit" value="upload" />
</form>

シンプルなテストコードで試したらOutOfMemoryError出なかった。
うまくいきそうな予感。

— さわださとし (@satoshis) 2018年1月6日

このformにajaxを叩くボタンを追加して、ajaxで再挑戦。

<script>
function uploadFiles() {
	var formData = new FormData($('#uploadFiles'));
	$.ajax({
		type: $('#uploadFiles').attr('method'),
		url: $('#uploadFiles').attr('action'),
		processData: false,
		contentType: false,
		data: formData
	}).then(
		function(data) {
			console.log(data);
		},
		function(data) {
			console.log("error");
		}
	);
}
</script>

<form id="uploadFiles" action="${url}" method="post" enctype="multipart/form-data">
 <input type="file" name="image"  >
 <input type="submit" value="upload" />
 <input type="button" value="ajaxupload" onclick="uploadFiles();"/>
</form>

なぜかajaxだとOutOfMemoryErrorが発生。submitだとうまくいくのに。

ajaxだとやっぱりOutOfMemoryErrorになる。
もうめんどくさいからいいわ。
動くやり方で実装しよ。

— さわださとし (@satoshis) 2018年1月6日

で、実際に動かすサイトのコードをこれに合わせてみた。
すると、なぜかアップロードしてくれない。

コードの差分を調べてみたら、複数ファイルのプレビューを表示するために、data-index属性を追加してあったのがまずいらしい。

<input type="file" name="image0" data-index="0" accept="image/*" />

data-index属性を消したらアップロードが動くようになった。