こんばんは
久々の投稿です
そして久々に新規開発をやってます
なかなか本業の開発に時間を費やせない今年ですが、
自分のための覚書として残りの日々、色々な記事を残していこうと思います
今回は「ファイルを添付させる際に、サイズ制限したい」という要望がありました。
こんな感じです
XPagesのファイルアップロード/ダウンロードコントロールをうまく使うと
そのようなことが出来ると聞いたことがあったのですが、
どこに書いてあったかを失念
見つからないから試しに簡易的に作ってみたという個人的な覚書です
さて本題に・・・
XPagesでファイルをアップロード→更新すると
ダウンロードコントロールは以下のように表示されます。
目に見える状態でサイズが書いてありますね
この情報をJavascriptでうまくとればなんとかなりそうです
ソースを見てみました
あれ？IDじゃない・・・
もう一つファイルを添付してソースを確認してみました
ふぁ
どうやらクラス名で取得しなければならないようですね
グーグル先生で調べてみると「getElementsByClassName」というので
取得できるようでした
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName
という事でやってみました
サイズ→ファイル名→作成日時→削除と表示され
image/jpeg・・・
お、取れた
IMG_3683.JPG→2020/0718 14:14 と準備取れ・・・
ゴミ箱アイコンはスキップされてimage/jpeg・・・
取れた
IMG_5260.JPG→2020/0718 14:15と表示され終了しました
まとめると・・・
ファイルタイプから始まる行は
ファイルタイプ、サイズ、ファイル名、作成日時、削除（見えていない）の5項目が取得され
2行目から
<ファイルタイプ>、<サイズ>、<ファイル名>、<作成日時>と4項目が取得されました。
ファイルダウンロードコントロールの以下の表記の場合は
For文を5からスタートし、6で割り切れる場合に値を取ればうまくいきそうです。
実際にやってみると
うまく取れました
（自信がなかったのでファイル増やしてみました）
あとは取れた値を変数に入れて足し算して閾値と比較すればいいのですが
どうも取れている値が「文字」なのでreplaceとNumberを使って数値化してから
変数に入れないといけませんね
その点に注意しながら出来たものがこちら
合計値取れていると思います
（桁を増やすためにファイルを変更してみました）
最後の仕上げとして、2MB（ここではわかりやすく2000KBにしています）以上なら
警告を出して処理を中断するという仕組みにしたいと思います。
この状態は2MB未満なので[保存する]ボタンをクリックしても警告は出ません
大きな容量のファイルを添付して[保存ボタン]をクリックすると・・・
「添付サイズオーバーです」と警告が出ているのがわかりますでしょうか
以下、今回のブログ用に作成したXPageです（汚いですが）
<xp:label value="添付ファイルのサイズは2MB未満でお願いします！" id="label1"
style="color:rgb(255,0,0);font-weight:bold">
</xp:label>
<xp:br></xp:br>
<xp:panel id="imagePanel">
<xp:this.data>
<xp:dominoDocument var="document1" formName="ImageSize"
computeWithForm="both">
</xp:dominoDocument>
</xp:this.data>
添付ファイル：<xp:fileUpload id="fileUpload1" value="#{document1.Body}">
<xp:eventHandler event="onchange" submit="true"
refreshMode="complete">
</xp:eventHandler>
</xp:fileUpload>
<xp:fileDownload rows="30" id="fileDownload1"
displayLastModified="false" value="#{document1.Body}"
hideWhen="true" allowDelete="true">
</xp:fileDownload>
</xp:panel>
<div id="alertMsg" style="color:red"></div>
<br/><br/><xp:button value="保存する" id="button1">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[var tmpList = document.getElementsByClassName('xspTextComputedField');
var cnt = 6;
var tmpSize = 0;
document.getElementById("alertMsg").innerHTML = ""
for (var i = 5; i < tmpList.length; i++) {
if(cnt == i){
tmpSize += Number(tmpList[i].innerHTML.replace(/,/g, '').replace(/KB/g, ''))
cnt += 4;
};
};
if(tmpSize >=2000){
document.getElementById("alertMsg").innerHTML = "添付サイズオーバーです！";
return false;
};
]]></xp:this.script>
</xp:eventHandler></xp:button>
もっと簡単な方法があったような気もしましたが、
今回は上記の方法で実装してみました。
（もしご存知のかたいらっしゃいましたら、コッソリ教えてください
）
今回はこの辺で・・・
あでゅー