今回は技術的な備忘録です。

ChromeでRedmineを使っていると、チケットへのファイル添付の際に

Maximum call stack size exceeded.

のエラーが出てファイルアップロード領域が多重表示されるという不具合に遭遇しました。Chromeのインスペクタを見る限りは

jquery-1.8.3-ui-1.9.2-ujs-2.0.3.js

で発生してるようだったのですが、どうも調べてみると

/javascripts/attachment.js

の中で、ファイル追加後に新規のファイル入力領域を追加する際に行っている

 $(inputEl).clone();
 

…が原因のようでした。どうもChromeとjQuery.clone()との組み合わせが悪いようです。

根本的な解決では無さそうですが、一旦以下のように、空のinput要素を生成した上で必要な属性を一つ一つコピるという形で対応しました。

function addInputFiles(inputEl) {
	/* 改変：ここから */
	//空のinput要素を生成
	var clearedFileInput = $("<input />");
	//必要な属性をコピー
	clearedFileInput.attr({
		"class": $(inputEl).attr("class"),
		"data-description-placeholder": $(inputEl).attr("data-description-placeholder"),
		"data-max-concurrent-uploads": $(inputEl).attr("data-max-concurrent-uploads"),
		"data-max-file-size-message": $(inputEl).attr("data-max-file-size-message"),
		"data-max-file-size": $(inputEl).attr("data-max-file-size"),
		"data-upload-path": $(inputEl).attr("data-upload-path"),
		"multiple": $(inputEl).attr("multiple"),
		"name": $(inputEl).attr("name"),
		"onchange": $(inputEl).attr("onchange"),
		"type": $(inputEl).attr("type")
	});
	/* 改変：ここまで */
	if (inputEl.files) {
		// upload files using ajax
		uploadAndAttachFiles(inputEl.files, inputEl);
		$(inputEl).remove();
	} else {
		// browser not supporting the file API, upload on form submission
		var attachmentId;
		var aFilename = inputEl.value.split(/\/|\\/);
		attachmentId = addFile(inputEl, { name: aFilename[ aFilename.length - 1 ] }, false);
		if (attachmentId) {
			$(inputEl).attr({ name: 'attachments[' + attachmentId + '][file]', style: 'display:none;' }).appendTo('#attachments_' + attachmentId);
		}
	}
	clearedFileInput.insertAfter('#attachments_fields');
}

備忘録兼ねてメモ。