From 4519120cc124ac26b3c281b82106634603c33154 Mon Sep 17 00:00:00 2001
From: claire <102092516+dragonflyfree@users.noreply.github.com>
Date: Thu, 29 Feb 2024 03:51:24 +0000
Subject: [PATCH] MultiFileUpload attachment size display work
---
.../classes/html/cmfive/MultiFileUpload.php | 4 +--
.../base/src/js/components/MultiFileUpload.ts | 29 ++++++++++++++++---
.../src/scss/cmfive/_multi_file_uploads.scss | 12 ++++++++
3 files changed, 39 insertions(+), 6 deletions(-)
diff --git a/system/classes/html/cmfive/MultiFileUpload.php b/system/classes/html/cmfive/MultiFileUpload.php
index 4aaec7264..896f20587 100644
--- a/system/classes/html/cmfive/MultiFileUpload.php
+++ b/system/classes/html/cmfive/MultiFileUpload.php
@@ -34,7 +34,7 @@ public function __toString(): string
if (!empty($this->accept)) {
$user_facing_file->setAccept($this->accept);
}
-
+
$buffer = '
' .
'
' .
$user_facing_file .
@@ -43,7 +43,7 @@ public function __toString(): string
'class' => 'd-none multi-upload-files',
'multiple' => true
])) .
- '
';
+ '
';
// Existing files container
if (!empty($this->existing_files)) {
diff --git a/system/templates/base/src/js/components/MultiFileUpload.ts b/system/templates/base/src/js/components/MultiFileUpload.ts
index 2e4b77967..89724dfab 100644
--- a/system/templates/base/src/js/components/MultiFileUpload.ts
+++ b/system/templates/base/src/js/components/MultiFileUpload.ts
@@ -1,5 +1,17 @@
// src/js/components/MultiFileUpload.ts
+function formatBytes(bytes, decimals = 2) {
+ if (bytes === 0) return '0 Bytes';
+
+ const k = 1024;
+ const dm = decimals < 0 ? 0 : decimals;
+ const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+ return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+}
+
export class MultiFileUpload {
private static containerTarget = 'multi-upload-file-container';
private static buttonTarget = 'multi-upload-button';
@@ -62,7 +74,7 @@ export class MultiFileUpload {
// Add new items
for (let file of files) {
- dt.items.add(file)
+ dt.items.add(file);
}
// Set in our "container"
@@ -106,14 +118,22 @@ export class MultiFileUpload {
file_display.classList.add('d-none');
}
}
- file_display.innerHTML = '';
+
+ var multiUploadSize = 0;
+ for (let i = 0; i < file_container.files.length; i++) {
+ multiUploadSize += file_container.files.item(i).size;
+ }
+
+ file_display.innerHTML = `Total Upload Size: ${formatBytes(multiUploadSize)}
`;
for (let i = 0; i < file_container.files.length; i++) {
const display_el = document.createElement('div');
display_el.classList.add('multi-upload-item');
display_el.innerText = file_container.files.item(i).name;
+ const upload_size_display = document.createElement('span');
+ upload_size_display.classList.add('multi-upload-item-size');
+ upload_size_display.innerText = formatBytes(file_container.files.item(i).size);
const remove_button = document.createElement('button');
- // remove_button.classList.add('btn', 'btn-sm', 'btn-outline-info');
remove_button.innerHTML = '';
remove_button.addEventListener('click', (e) => {
e.preventDefault();
@@ -138,7 +158,8 @@ export class MultiFileUpload {
MultiFileUpload.loadList(parent);
})
remove_button.onclick = MultiFileUpload.removeButtonHandler;
- display_el.appendChild(remove_button);
+ display_el.prepend(upload_size_display);
+ display_el.prepend(remove_button);
file_display.appendChild(display_el);
}
}
diff --git a/system/templates/base/src/scss/cmfive/_multi_file_uploads.scss b/system/templates/base/src/scss/cmfive/_multi_file_uploads.scss
index 49cf654b8..f84514575 100644
--- a/system/templates/base/src/scss/cmfive/_multi_file_uploads.scss
+++ b/system/templates/base/src/scss/cmfive/_multi_file_uploads.scss
@@ -60,4 +60,16 @@
@include theme((background-color: 'light-grey'));
}
}
+}
+
+/** Secondary theme colour text for the multi-upload size */
+.multi-upload-total-size {
+ color: #6c757d;
+}
+
+.multi-upload-item-size {
+ color: #6c757d;
+ padding: 1rem;
+ display: inline-block;
+ min-width: 16ch;
}
\ No newline at end of file