Hatena::ブログ(Diary)

今日の役に立たない一言 − Today’s Trifle! −

2018-01-06

[]GCSにファイルをアップロードできなくて試行錯誤した話 GCSにファイルをアップロードできなくて試行錯誤した話を含むブックマーク GCSにファイルをアップロードできなくて試行錯誤した話のブックマークコメント

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

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

no title

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

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

シンプルな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>

この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だとうまくいくのに。

で、実際に動かすサイトのコードをこれに合わせてみた。

すると、なぜかアップロードしてくれない。

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

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

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

トラックバック - http://d.hatena.ne.jp/satoshis/20180106/p1


10000番ポートがブロックされている環境ではこちらのカウンターは表示されません2004/02/29に値が壊れたすごいカウンター
←はてなカウンター