bubbleのストレージに入っているfileの合計を算出する方法がわかりません。

bubble
1

###・前提条件

現在、Multi-File Uploaderプラグインを使用してファイルを複数選択して投稿できる機能を作成しています。問題としては、このプラグインでは指定したfileのfilesizeを参照できない点です。実装したい機能としてはfileを複数選択したのちにそのファイルのサイズの合計が50MB以上だった場合にエラーメッセージを表示するものです。

試したこと

試してみたことはtoolboxプラグインを使用してJavascriptでファイルサイズを測定できないか実装してみたところ、非同期でfileサイズの測定が遅く実用レベルにありませんでした。

2

こちらの記事にてjavascriptを記述することで解決いたしました！

「いいね！」 1
3

上記のwebサイトだと詳しく書いていなかったので備忘録のためにjavascriptを記述しておきます。

  1. Toolboxプラグインを使用して

  2. 下記のjavascriptを記述しました。

function calculateTotalFileSize() {
  var dzSizeElements = document.querySelectorAll('.dz-size');
  var totalFileSize = 0;

  dzSizeElements.forEach(function(element) {
    var fileSizeText = element.textContent;
    var fileSize = parseFloat(fileSizeText);

    if (!isNaN(fileSize)) {
      totalFileSize += fileSize;
    }
  });

  return totalFileSize;
}

// 関数を呼び出し、結果を取得して出力
var result = calculateTotalFileSize();
console.log(result);
  1. 上記コードの内容
    fileuploaderプラグインの.div-sizeに入っているファイルサイズへアクセスをして、全てのファイルサイズの合計を計算してconsoleというところに表示する。というような内容になっています。
「いいね！」 2
4

このプラグインのfileサイズはBiMもKiBも同じ値になっていたので新しく全ての値をB（ ビット）に置き換えて単位を同じにするコードを追記しました！ぜひ参考にしてください。

function calculateTotalFileSize() {
  var dzSizeElements = document.querySelectorAll('.dz-size');
  var totalFileSize = 0;

  dzSizeElements.forEach(function(element) {
    var fileSizeText = element.textContent;
    var fileSize = parseFloat(fileSizeText);

    if (!isNaN(fileSize)) {
      if (fileSizeText.includes("MiB")) {
        fileSize *= 1024000;
      } else if (fileSizeText.includes("KiB")) {
        fileSize *= 1024;
      }

      totalFileSize += fileSize;
    }
  });

  return totalFileSize;
}

bubble_fn_a(calculateTotalFileSize());
「いいね！」 3
5

わざわざ、対応結果の書き込みありがとうございます

「いいね！」 1