【Visualforce】inputTextを使用してアップロードした画像ファイルがおかしい
Vislaoforceでファイルをアップロードする動作を含む画面を作成していました。
画面の描画はrerenderを用いているため、inputFileは使用することが出来ません。
そんなわけで、過去にここで記事にした方法で実装を行っていました。
しかし、この機能でファイルがうまくアップロードされないという不具合が発生しました。
問題が発生したのはiPhoneで、アップロードした画像が途中でグレーになってしまうようです。
何度やっても同じことが起きるとのことで、急いで調査することになりました。
テストのときにiPhoneでも確認したはずなのですが、その時は正常に動いていました。
しかし、カメラから写真を撮ってそのままアップロードするという動きは確認していませんでした。
実際にカメラで撮った画像で試してみると、同じ現象が発生しました。
Chromeで同じ画像を使って確認しても、再現しませんでした。
ファイルのアップロードについて細かく調べていくと、アップロードしたファイルとSalesforce側のファイルのサイズが大きく異なることが分かりました。
さらに調べていくと、inputタグにファイルの中身をセットした際に、長さが変わっていることが分かりました。
どうやらこれが原因のようです。
inputタグにセットした後の文字列の長さは524288文字でした。
ぐぐってみると、512KBなのですね。
https://stackoverflow.com/questions/26469152/why-is-the-default-max-length-for-an-input-524288
どうやら、input type=”text”の文字数の上限は524288文字だったようです。
ブラウザごとの最大文字数は確認していませんが、これが原因であることは間違いありません。
inputTextをtextareaに直すことで解決することが出来ました。
こんな感じでしょうか。
<input type="file" onchange="setAttachment(this);" />
<apex:inputHidden id="fileName" value="{!fileAttachment.Name}" />
<apex:inputTextarea id="fileBody" value="{!fileAttachment.Body}" style="display: none;" />
<apex:commandButton action="{!uploadAttachment}" value="アップロード" />
<script>
function setAttachment(obj){
var reader = new FileReader();
var file= obj.files[0];
var fileName;
var fileBody;
// ファイルが設定されていない場合は何もしない
if(typeof file === "undefined"){
return;
}
// ファイル読み込み時の処理を設定する
reader.onload = function(event){
// ファイル名を取得する
fileName = file.name;
// ファイルの中身を取得する
fileBody = event.target.result;
// hidden項目にNameを設定する
$(obj).siblings('input[id$="fileName"]').val(fileName);
// hidden項目にBodyを設定する
$(obj).siblings('input[id$="fileBody"]').val(fileBody);
}
// ファイルの読み込みを行う
reader.readAsDataURL(file);
}
</script>
このロジックを使った方がいるか分かりませんが、もし居たら申し訳ありませんでした。
No comments.