FileUpload: Added fileSizeTypes (#4377)

* added fileSizeTypes

* Added filesizeTypes fileupload, refactor and docs

* Added format

components/lib/config/PrimeVue.d.ts

@@ -300,6 +300,7 @@ export interface PrimeVueLocaleOptions {
     cancel?: string;
     completed?: string;
     pending?: string;
+    fileSizeTypes: string[];
     dayNames: string[];
     dayNamesShort: string[];
     dayNamesMin: string[];

components/lib/config/PrimeVue.js

@@ -33,6 +33,7 @@ export const defaultOptions = {
         cancel: 'Cancel',
         completed: 'Completed',
         pending: 'Pending',
+        fileSizeTypes: ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
         dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
         dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
         dayNamesMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],

components/lib/fileupload/FileContent.vue

@@ -52,16 +52,18 @@ export default {
     },
     methods: {
         formatSize(bytes) {
+            const k = 1024;
+            const dm = 3;
+            const sizes = this.$primevue.config.locale.fileSizeTypes;
+
             if (bytes === 0) {
-                return '0 B';
+                return `0 ${sizes[0]}`;
             }
 
-            let k = 1000,
+            const i = Math.floor(Math.log(bytes) / Math.log(k));
-                dm = 3,
+            const formattedSize = parseFloat((bytes / Math.pow(k, i)).toFixed(dm));
-                sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
-                i = Math.floor(Math.log(bytes) / Math.log(k));
 
-            return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+            return `${formattedSize} ${sizes[i]}`;
         }
     },
     components: {

components/lib/fileupload/FileUpload.vue

@@ -326,16 +326,18 @@ export default {
             }
         },
         formatSize(bytes) {
+            const k = 1024;
+            const dm = 3;
+            const sizes = this.$primevue.config.locale.fileSizeTypes;
+
             if (bytes === 0) {
-                return '0 B';
+                return `0 ${sizes[0]}`;
             }
 
-            let k = 1000,
+            const i = Math.floor(Math.log(bytes) / Math.log(k));
-                dm = 3,
+            const formattedSize = parseFloat((bytes / Math.pow(k, i)).toFixed(dm));
-                sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
-                i = Math.floor(Math.log(bytes) / Math.log(k));
 
-            return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+            return `${formattedSize} ${sizes[i]}`;
         },
         isFileLimitExceeded() {
             if (this.fileLimit && this.fileLimit <= this.files.length + this.uploadedFileCount && this.focused) {

doc/common/apidoc/index.json

@@ -13342,6 +13342,13 @@
                             "type": "string",
                             "default": ""
                         },
+                        {
+                            "name": "fileSizeTypes",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string[]",
+                            "default": ""
+                        },
                         {
                             "name": "dayNames",
                             "optional": false,

doc/configuration/locale/LocaleApiDoc.vue

@@ -124,6 +124,10 @@
                         <td>pending</td>
                         <td>Pending</td>
                     </tr>
+                    <tr>
+                        <td>fileSizeTypes</td>
+                        <td>['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']</td>
+                    </tr>
                     <tr>
                         <td>dayNames</td>
                         <td>['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'</td>

doc/fileupload/TemplateDoc.vue

@@ -208,16 +208,18 @@ export default {
             this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
         },
         formatSize(bytes) {
+            const k = 1024;
+            const dm = 3;
+            const sizes = this.$primevue.config.locale.fileSizeTypes;
+
             if (bytes === 0) {
-                return '0 B';
+                return \`0 \${sizes[0]}\`;
             }
 
-            let k = 1000,
+            const i = Math.floor(Math.log(bytes) / Math.log(k));
-                dm = 3,
+            const formattedSize = parseFloat((bytes / Math.pow(k, i)).toFixed(dm));
-                sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
-                i = Math.floor(Math.log(bytes) / Math.log(k));
 
-            return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+            return \`\${formattedSize} \${sizes[i]}\`;
         }
     }
 };
@@ -315,13 +317,20 @@ const onTemplatedUpload = () => {
     toast.add({ severity: "info", summary: "Success", detail: "File Uploaded", life: 3000 });
 };
 
-const formatSize = (bytes) => {
+formatSize(bytes) {
-    if (bytes === 0) return "0 B";
     const k = 1024;
-    const sizes = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+    const dm = 3;
+    const sizes = this.$primevue.config.locale.fileSizeTypes;
+
+    if (bytes === 0) {
+        return \`0 \${sizes[0]}\`;
+    }
+
     const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+    const formattedSize = parseFloat((bytes / Math.pow(k, i)).toFixed(dm));
-};
+
+    return \`\${formattedSize} \${sizes[i]}\`;
+},
 <\/script>`
             }
         };
@@ -351,16 +360,18 @@ const formatSize = (bytes) => {
             this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
         },
         formatSize(bytes) {
+            const k = 1024;
+            const dm = 3;
+            const sizes = this.$primevue.config.locale.fileSizeTypes;
+
             if (bytes === 0) {
-                return '0 B';
+                return `0 ${sizes[0]}`;
             }
 
-            let k = 1000,
+            const i = Math.floor(Math.log(bytes) / Math.log(k));
-                dm = 3,
+            const formattedSize = parseFloat((bytes / Math.pow(k, i)).toFixed(dm));
-                sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
-                i = Math.floor(Math.log(bytes) / Math.log(k));
 
-            return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+            return `${formattedSize} ${sizes[i]}`;
         }
     }
 };