From 544727cf2a382319a8cd15f72b11cf16a660a848 Mon Sep 17 00:00:00 2001
From: Azri Kahar <42867097+azrikahar@users.noreply.github.com>
Date: Thu, 14 Oct 2021 22:37:01 +0800
Subject: [PATCH] Format filesize for display & file info sidebar (#8786)

* format filesize for display & file info sidebar

* Use power of 10

Co-authored-by: Rijk van Zanten <rijkvanzanten@me.com>
---
 app/src/displays/filesize/index.ts                            | 4 ++--
 app/src/modules/files/components/file-info-sidebar-detail.vue | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/src/displays/filesize/index.ts b/app/src/displays/filesize/index.ts
index 034b4ed8ab..dc093dd750 100644
--- a/app/src/displays/filesize/index.ts
+++ b/app/src/displays/filesize/index.ts
@@ -1,12 +1,12 @@
 import { defineDisplay } from '@directus/shared/utils';
-import bytes from 'bytes';
+import formatFilesize from '@/utils/format-filesize';
 
 export default defineDisplay({
 	id: 'filesize',
 	name: '$t:displays.filesize.filesize',
 	description: '$t:displays.filesize.description',
 	icon: 'description',
-	component: ({ value }: { value: number }) => bytes(value, { decimalPlaces: 0 }),
+	component: ({ value }: { value: number }) => formatFilesize(value),
 	options: [],
 	types: ['integer'],
 });
diff --git a/app/src/modules/files/components/file-info-sidebar-detail.vue b/app/src/modules/files/components/file-info-sidebar-detail.vue
index 5bf5343d4e..711d34e2a3 100644
--- a/app/src/modules/files/components/file-info-sidebar-detail.vue
+++ b/app/src/modules/files/components/file-info-sidebar-detail.vue
@@ -129,7 +129,7 @@
 import { useI18n } from 'vue-i18n';
 import { defineComponent, computed, ref, watch } from 'vue';
 import readableMimeType from '@/utils/readable-mime-type';
-import bytes from 'bytes';
+import formatFilesize from '@/utils/format-filesize';
 import localizedFormat from '@/utils/localized-format';
 import api, { addTokenToURL } from '@/api';
 import { getRootPath } from '@/utils/get-root-path';
@@ -154,7 +154,7 @@ export default defineComponent({
 			if (!props.file) return null;
 			if (!props.file.filesize) return null;
 
-			return bytes(props.file.filesize, { decimalPlaces: 2, unitSeparator: ' ' }); // { locale: locale.value.split('-')[0] }
+			return formatFilesize(props.file.filesize); // { locale: locale.value.split('-')[0] }
 		});
 
 		const { creationDate, modificationDate } = useDates();