From df834855da0a401ae79f1cd1f81145d2dcef2f63 Mon Sep 17 00:00:00 2001
From: Anton Tranelis <31516529+antontranelis@users.noreply.github.com>
Date: Wed, 11 Jun 2025 10:10:10 +0200
Subject: [PATCH] fix(source): gallery png support (#237)

* 3.0.97

* 3.0.98

* 3.0.99

* png support for gallery

* Use actual file types; throw error when using unsupported file type

---------

Co-authored-by: Maximilian Harz <maxharz@gmail.com>
---
 package-lock.json                             |  4 ++--
 package.json                                  |  2 +-
 .../Subcomponents/GalleryForm.spec.tsx        |  2 ++
 .../Profile/Subcomponents/GalleryForm.tsx     |  3 +++
 .../Profile/Subcomponents/GalleryView.tsx     | 23 +++++++++++++++----
 .../__snapshots__/GalleryForm.spec.tsx.snap   |  6 ++---
 src/types/Item.d.ts                           |  1 +
 7 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d7c81aa6..20c727fe 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "utopia-ui",
-  "version": "3.0.97",
+  "version": "3.0.99",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "utopia-ui",
-      "version": "3.0.97",
+      "version": "3.0.99",
       "license": "GPL-3.0-only",
       "dependencies": {
         "@heroicons/react": "^2.0.17",
diff --git a/package.json b/package.json
index ac3ef109..5109e8dc 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "utopia-ui",
-  "version": "3.0.97",
+  "version": "3.0.99",
   "description": "Reuseable React Components to build mapping apps for real life communities and networks",
   "repository": "https://github.com/utopia-os/utopia-ui",
   "homepage": "https://utopia-os.org/",
diff --git a/src/Components/Profile/Subcomponents/GalleryForm.spec.tsx b/src/Components/Profile/Subcomponents/GalleryForm.spec.tsx
index e4eafc1e..3375b74c 100644
--- a/src/Components/Profile/Subcomponents/GalleryForm.spec.tsx
+++ b/src/Components/Profile/Subcomponents/GalleryForm.spec.tsx
@@ -67,6 +67,7 @@ describe('GalleryForm', () => {
           id: '1',
           width: 800,
           height: 600,
+          type: 'image/jpeg',
         },
       },
       {
@@ -74,6 +75,7 @@ describe('GalleryForm', () => {
           id: '2',
           width: 1024,
           height: 768,
+          type: 'image/jpeg',
         },
       },
     ]
diff --git a/src/Components/Profile/Subcomponents/GalleryForm.tsx b/src/Components/Profile/Subcomponents/GalleryForm.tsx
index 5aef9353..e252d790 100644
--- a/src/Components/Profile/Subcomponents/GalleryForm.tsx
+++ b/src/Components/Profile/Subcomponents/GalleryForm.tsx
@@ -42,6 +42,7 @@ export const GalleryForm = ({ state, setState }: Props) => {
         height,
         asset: await appState.assetsApi.upload(compressedFile, file.name),
         name: file.name,
+        type: file.type,
       }
     })
 
@@ -56,6 +57,7 @@ export const GalleryForm = ({ state, setState }: Props) => {
               id: upload.asset.id,
               width: upload.width,
               height: upload.height,
+              type: upload.type,
             },
           },
         ],
@@ -68,6 +70,7 @@ export const GalleryForm = ({ state, setState }: Props) => {
     onDrop: upload,
     accept: {
       'image/jpeg': [],
+      'image/png': [],
     },
   })
 
diff --git a/src/Components/Profile/Subcomponents/GalleryView.tsx b/src/Components/Profile/Subcomponents/GalleryView.tsx
index d167aec0..13549cb0 100644
--- a/src/Components/Profile/Subcomponents/GalleryView.tsx
+++ b/src/Components/Profile/Subcomponents/GalleryView.tsx
@@ -6,15 +6,28 @@ import { useAppState } from '#components/AppShell/hooks/useAppState'
 
 import type { Item } from '#types/Item'
 
+const extensionMap = new Map([
+  ['image/jpeg', '.jpg'],
+  ['image/png', '.png'],
+])
+
+const getExtension = (type: string) => {
+  const extension = extensionMap.get(type)
+
+  if (extension) return extension
+
+  throw new Error(`Unsupported file type: ${type}`)
+}
+
 export const GalleryView = ({ item }: { item: Item }) => {
   const [index, setIndex] = useState(-1)
   const appState = useAppState()
   const images =
-    item.gallery?.map((i, j) => ({
-      src: appState.assetsApi.url + `${i.directus_files_id.id}.jpg`,
-      width: i.directus_files_id.width,
-      height: i.directus_files_id.height,
-      index: j,
+    item.gallery?.map(({ directus_files_id: { id, type, width, height } }, index) => ({
+      src: `${appState.assetsApi.url}${id}${getExtension(type)}`,
+      width,
+      height,
+      index,
     })) ?? []
 
   if (images.length > 0)
diff --git a/src/Components/Profile/Subcomponents/__snapshots__/GalleryForm.spec.tsx.snap b/src/Components/Profile/Subcomponents/__snapshots__/GalleryForm.spec.tsx.snap
index d762ae6e..0eb344e5 100644
--- a/src/Components/Profile/Subcomponents/__snapshots__/GalleryForm.spec.tsx.snap
+++ b/src/Components/Profile/Subcomponents/__snapshots__/GalleryForm.spec.tsx.snap
@@ -69,7 +69,7 @@ exports[`GalleryForm > with previous images > renders 1`] = `
       tabindex="0"
     >
       <input
-        accept="image/jpeg"
+        accept="image/jpeg,image/png"
         data-testid="gallery-upload-input"
         multiple=""
         style="border: 0px; clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
@@ -149,7 +149,7 @@ exports[`GalleryForm > with uploading images > renders 1`] = `
       tabindex="0"
     >
       <input
-        accept="image/jpeg"
+        accept="image/jpeg,image/png"
         data-testid="gallery-upload-input"
         multiple=""
         style="border: 0px; clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
@@ -193,7 +193,7 @@ exports[`GalleryForm > without previous images > renders 1`] = `
       tabindex="0"
     >
       <input
-        accept="image/jpeg"
+        accept="image/jpeg,image/png"
         data-testid="gallery-upload-input"
         multiple=""
         style="border: 0px; clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
diff --git a/src/types/Item.d.ts b/src/types/Item.d.ts
index 54f3b00b..be3d6194 100644
--- a/src/types/Item.d.ts
+++ b/src/types/Item.d.ts
@@ -12,6 +12,7 @@ interface GalleryItem {
     id: string
     width: number
     height: number
+    type: string
   }
 }