From 1d2b4bd2e92310d60ce9bdb4cbe10b0d71049d4f Mon Sep 17 00:00:00 2001
From: Irshad Ahmad <irshad@wpsocio.com>
Date: Tue, 22 Oct 2024 22:29:13 +0530
Subject: [PATCH] WP Telegram - Show file size when attaching them (#191)

---
 .changeset/rude-moose-shop.md                   |  5 +++++
 .../wptelegram/js/p2tg-block-editor/Files.tsx   | 17 ++++++++++++++---
 2 files changed, 19 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/rude-moose-shop.md

diff --git a/.changeset/rude-moose-shop.md b/.changeset/rude-moose-shop.md
new file mode 100644
index 00000000..9c588a8a
--- /dev/null
+++ b/.changeset/rude-moose-shop.md
@@ -0,0 +1,5 @@
+---
+"wptelegram": patch
+---
+
+Updated attach files UI to show file size
diff --git a/plugins/wptelegram/js/p2tg-block-editor/Files.tsx b/plugins/wptelegram/js/p2tg-block-editor/Files.tsx
index e4336c16..ca93fcc0 100644
--- a/plugins/wptelegram/js/p2tg-block-editor/Files.tsx
+++ b/plugins/wptelegram/js/p2tg-block-editor/Files.tsx
@@ -1,5 +1,5 @@
 import { BaseControl, Button, Flex, Icon } from '@wordpress/components';
-import { useCallback } from '@wordpress/element';
+import { useCallback, useState } from '@wordpress/element';
 import { MediaUpload } from '@wordpress/media-utils';
 
 import { __ } from '@wpsocio/i18n';
@@ -14,6 +14,8 @@ const render: React.FC<{ open: VoidFunction }> = ({ open }) => (
 
 const allowedTypes: Array<string> = [];
 
+type FileInfo = { id: number; url: string; filesizeHumanReadable?: string };
+
 export function Files() {
 	const { data } = useDataState();
 	const updateField = useUpdateField();
@@ -26,10 +28,18 @@ export function Files() {
 		[data.files, updateField],
 	);
 
+	const [filesizeMap, setFilesizeMap] = useState<Record<string, string>>({});
+
 	const onSelect = useCallback(
-		(files: Array<{ id: number; url: string }>) => {
+		(files: Array<FileInfo>) => {
 			const newFiles = files.reduce(
-				(acc, { id, url }) => {
+				(acc, { id, url, filesizeHumanReadable }) => {
+					if (filesizeHumanReadable) {
+						setFilesizeMap((prev) => ({
+							...prev,
+							[id]: filesizeHumanReadable,
+						}));
+					}
 					acc[id] = url;
 					return acc;
 				},
@@ -69,6 +79,7 @@ export function Files() {
 										onClick={onRemove(id)}
 									/>
 									<span>{name}</span>
+									{filesizeMap[id] ? <span>({filesizeMap[id]})</span> : null}
 								</Flex>
 							</li>
 						);