From e6ecd63a59340198ae05c898ee8fde0fb39678b2 Mon Sep 17 00:00:00 2001
From: Giancarlo Buomprisco <giancarlopsk@gmail.com>
Date: Tue, 19 Aug 2025 20:37:44 +0700
Subject: [PATCH] fix: improve storage file handling (#325)

- Improve storage files handling
- Incremented version in package.json from 2.12.2 to 2.12.3.
- Updated ImageUploader component to improve label and image styles, adding cursor pointer and transition effects for better user interaction.
---
 package.json                                  |  2 +-
 .../update-account-image-container.tsx        | 22 +++++++------------
 .../update-team-account-image-container.tsx   | 19 +++++++---------
 packages/ui/src/makerkit/image-uploader.tsx   | 10 +++++++--
 4 files changed, 25 insertions(+), 28 deletions(-)

diff --git a/package.json b/package.json
index 99a7f73a4..e8fcdc50b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "next-supabase-saas-kit-turbo",
-  "version": "2.12.2",
+  "version": "2.12.3",
   "private": true,
   "sideEffects": false,
   "engines": {
diff --git a/packages/features/accounts/src/components/personal-account-settings/update-account-image-container.tsx b/packages/features/accounts/src/components/personal-account-settings/update-account-image-container.tsx
index 72e01df8c..c087d89e5 100644
--- a/packages/features/accounts/src/components/personal-account-settings/update-account-image-container.tsx
+++ b/packages/features/accounts/src/components/personal-account-settings/update-account-image-container.tsx
@@ -140,29 +140,23 @@ async function uploadUserProfilePhoto(
 ) {
   const bytes = await photoFile.arrayBuffer();
   const bucket = client.storage.from(AVATARS_BUCKET);
-  const extension = photoFile.name.split('.').pop();
-  const fileName = await getAvatarFileName(userId, extension);
+  const fileName = getAvatarFileName(userId);
+  const { nanoid } = await import('nanoid');
+  const cacheBuster = nanoid(16);
 
   const result = await bucket.upload(fileName, bytes, {
+    contentType: photoFile.type,
     upsert: true,
   });
 
   if (!result.error) {
-    return bucket.getPublicUrl(fileName).data.publicUrl;
+    const url = bucket.getPublicUrl(userId).data.publicUrl;
+    return `${url}?v=${cacheBuster}`;
   }
 
   throw result.error;
 }
 
-async function getAvatarFileName(
-  userId: string,
-  extension: string | undefined,
-) {
-  const { nanoid } = await import('nanoid');
-
-  // we add a version to the URL to ensure
-  // the browser always fetches the latest image
-  const uniqueId = nanoid(16);
-
-  return `${userId}.${extension}?v=${uniqueId}`;
+function getAvatarFileName(userId: string) {
+  return userId;
 }
diff --git a/packages/features/team-accounts/src/components/settings/update-team-account-image-container.tsx b/packages/features/team-accounts/src/components/settings/update-team-account-image-container.tsx
index 99400b9c1..793bbcec2 100644
--- a/packages/features/team-accounts/src/components/settings/update-team-account-image-container.tsx
+++ b/packages/features/team-accounts/src/components/settings/update-team-account-image-container.tsx
@@ -118,26 +118,23 @@ async function uploadUserProfilePhoto(
 ) {
   const bytes = await photoFile.arrayBuffer();
   const bucket = client.storage.from(AVATARS_BUCKET);
-  const extension = photoFile.name.split('.').pop();
-  const fileName = await getAvatarFileName(userId, extension);
+  const fileName = getAvatarFileName(userId);
+  const { nanoid } = await import('nanoid');
+  const cacheBuster = nanoid(16);
 
   const result = await bucket.upload(fileName, bytes, {
+    contentType: photoFile.type,
     upsert: true,
   });
 
   if (!result.error) {
-    return bucket.getPublicUrl(fileName).data.publicUrl;
+    const url = bucket.getPublicUrl(userId).data.publicUrl;
+    return `${url}?v=${cacheBuster}`;
   }
 
   throw result.error;
 }
 
-async function getAvatarFileName(
-  userId: string,
-  extension: string | undefined,
-) {
-  const { nanoid } = await import('nanoid');
-  const uniqueId = nanoid(16);
-
-  return `${userId}.${extension}?v=${uniqueId}`;
+function getAvatarFileName(userId: string) {
+  return userId;
 }
diff --git a/packages/ui/src/makerkit/image-uploader.tsx b/packages/ui/src/makerkit/image-uploader.tsx
index 84b8046fc..5a89d758d 100644
--- a/packages/ui/src/makerkit/image-uploader.tsx
+++ b/packages/ui/src/makerkit/image-uploader.tsx
@@ -69,11 +69,17 @@ export function ImageUploader(
 
   return (
     <div className={'flex items-center space-x-4'}>
-      <label className={'animate-in fade-in zoom-in-50 relative h-20 w-20'}>
+      <label
+        className={
+          'animate-in fade-in zoom-in-50 group/label relative h-20 w-20 cursor-pointer'
+        }
+      >
         {/* eslint-disable-next-line @next/next/no-img-element */}
         <img
           decoding="async"
-          className={'h-20 w-20 rounded-full object-cover'}
+          className={
+            'h-20 w-20 rounded-full object-cover transition-all duration-300 group-hover/label:opacity-80'
+          }
           src={image}
           alt={''}
         />