From 80f3735b025dcb4a7c04ffda8cd5719374d7a3d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Munsch?= <jeremy.munsch@ldc.fr>
Date: Fri, 17 Jun 2022 17:23:41 +0200
Subject: [PATCH] Image InputComponent add file size

---
 .../ts/components/bo/ImageInputComponent.vue  | 35 ++++++++++++++-----
 1 file changed, 27 insertions(+), 8 deletions(-)

diff --git a/resources/ts/components/bo/ImageInputComponent.vue b/resources/ts/components/bo/ImageInputComponent.vue
index a64854a..5b9f732 100644
--- a/resources/ts/components/bo/ImageInputComponent.vue
+++ b/resources/ts/components/bo/ImageInputComponent.vue
@@ -89,7 +89,10 @@
           v-if="_value"
           :id="`PreviewHelp${_id}`"
           class="form-text text-muted d-block"
-          >{{ __("Prévisualisation de l'image") }}</small
+          >{{ __("Prévisualisation de l'image")
+          }}<span v-if="_originalFile" class="fw-bold"
+            >&nbsp;{{ humanFileSize(_originalFile.size) }}&nbsp;</span
+          ></small
         >
         <img
           v-if="_value"
@@ -336,6 +339,9 @@ import Cropper from "cropperjs";
 import { Tooltip } from "bootstrap";
 import trans from "../../modules/trans";
 
+const UNITS = ["byte", "kilobyte", "megabyte", "gigabyte", "terabyte", "petabyte"];
+const BYTES_PER_KB = 1024;
+
 export default defineComponent({
   mixins: [trans],
   emits: ["browseFile"],
@@ -446,7 +452,7 @@ export default defineComponent({
     _hasModdedImage: boolean;
     _cropper: Cropper | null;
 
-    _originalFile: null;
+    _originalFile: File | null;
     _originalFileName: string;
     _previewStyle: string;
   } {
@@ -617,6 +623,7 @@ export default defineComponent({
         false
       );
       if (el.files[0]) {
+        self._originalFile = el.files[0];
         reader.readAsDataURL(el.files[0]);
         this._valueFileName = el.files[0].name;
       }
@@ -636,6 +643,7 @@ export default defineComponent({
         if (!actualImage || !actualImage.files) {
           throw new Error("actualImage is not defined");
         }
+        self._originalFile = actualImage.files[0];
         self._originalFileName = actualImage.files[0].name;
         imgEditor.src = URL.createObjectURL(actualImage.files[0]);
 
@@ -702,9 +710,26 @@ export default defineComponent({
         type: "image/png",
         lastModified: new Date().getTime(),
       });
+      this._originalFile = file;
       container.items.add(file);
       actualImage.files = container.files;
     },
+    humanFileSize(sizeBytes: number | bigint): string {
+      let size = Math.abs(Number(sizeBytes));
+
+      let u = 0;
+      while (size >= BYTES_PER_KB && u < UNITS.length - 1) {
+        size /= BYTES_PER_KB;
+        ++u;
+      }
+
+      return new Intl.NumberFormat([], {
+        style: "unit",
+        unit: UNITS[u],
+        unitDisplay: "short",
+        maximumFractionDigits: 1,
+      }).format(size);
+    },
   },
 });
 </script>
@@ -743,12 +768,6 @@ export default defineComponent({
       left: 50%;
       transform: translateX(-50%) translateY(-50%);
     }
-
-    @include media-breakpoint-up(md) {
-      & > div {
-        position: absolute;
-      }
-    }
   }
   input.rightAligned {
     direction: ltr !important;