添付ファイルフィールドに容量制限を設定したい

kintone 開発相談
1

添付ファイルフィールドに容量制限を設定したい

aiに作成してもらったjavaScriptをkintoneに設定してみたが、設定値(500KB)以上の添付ファイルが保存できてしまう

kintoneに設定したjsコード、UTF-8（BOMなし）で保存

(function() {
‘use strict’;

const FIELD_CODE = ‘File’;
const MAX_TOTAL_SIZE = 500 * 1024; // 500KB = 512,000バイト

const events = [
‘app.record.create.submit’,
‘app.record.edit.submit’
];

function getTotalSize(record) {
const field = record[FIELD_CODE];

if (!field || !Array.isArray(field.value)) {
  return 0;
}

return field.value.reduce(function(total, file) {
  return total + Number(file.size || 0);
}, 0);

}

kintone.events.on(events, function(event) {
const totalSize = getTotalSize(event.record);

if (totalSize > MAX_TOTAL_SIZE) {
  const totalKB = (totalSize / 1024).toFixed(1);

  event.error =
    '添付ファイルの合計サイズが上限の500KBを超えています。' +
    '（現在: ' + totalKB + 'KB）' +
    ' ファイルを削除してから保存してください。';
}

return event;

});
})();

2

制限事項にありますが、Submit時に添付ファイルの情報取得できないんですよね

方法としては

  1. ファイルが選ばれた瞬間のHTML自体のchangeをひろう
    未検証ですがこういうイメージ
    'use strict';
    const MAX = 500 * 1024; // 500KB

    document.addEventListener('change', (e) => {
      if (e.target.type !== 'file') return;       // 添付欄のinputだけ対象
      const files = Array.from(e.target.files || []);
      const total = files.reduce((s, f) => s + f.size, 0);
      if (total > MAX) {
        alert(`添付ファイルが上限の500KBを超えています（${(total/1024).toFixed(1)}KB）。`);
        e.target.value = '';                       // 添付を取り消す
      }
    });
  })();
  1. スペースフィールドに自前のアップロードUIを用意してチェックする、問題なければAPI経由でアップロードなど

でしょうか。
1はちょっとﾊｯｸ的ですしほかの添付ファイルフィールドとの兼ね合いとかもあるので、2でできるのがベストですが実装重いのは2なのでメリデメという感じですかねぇ

3

mura様

早々のアドバイスありがとうございます。１の頂いたコードをaiで確認しながら、kintoneに設定してみたのですが、やはりうまくいきませんでした。２については、スペースフィールド以降の説明が当方、知識がなく、まったく理解が及びません。aiに確認しながら、理解をしていこうと思っております。どうもありがとうございました。