fix: sync prefix of image in db (#360)

Author: hathuanihi

backend/src/migrations/1768204319854-FixFeaturedImagePath.ts

@@ -0,0 +1,14 @@
+import { MigrationInterface, QueryRunner } from "typeorm";
+
+export class FixFeaturedImagePath1768204319854 implements MigrationInterface {
+    name = 'FixFeaturedImagePath1768204319854'
+
+    public async up(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`UPDATE "app" SET "featuredImage" = SUBSTRING("featuredImage" FROM '/uploads/.*') WHERE "featuredImage" LIKE '%/api/uploads/%';`);
+        await queryRunner.query(`UPDATE "app_version" SET "featuredImage" = SUBSTRING("featuredImage" FROM '/uploads/.*') WHERE "featuredImage" LIKE '%/api/uploads/%';`);
+        await queryRunner.query(`UPDATE "user" SET "profileImage" = SUBSTRING("profileImage" FROM '/uploads/.*') WHERE "profileImage" LIKE '%/api/uploads/%';`);
+        await queryRunner.query(`UPDATE "link_type" SET "icon" = SUBSTRING("icon" FROM '/uploads/.*') WHERE "icon" LIKE '%/api/uploads/%';`);
+    }
+
+    public async down(queryRunner: QueryRunner): Promise<void> { }
+}

frontend/src/components/MediaManager/MediaManager.tsx

@@ -27,6 +27,7 @@ const MediaManagerModal = ({
   onClose: () => void
 }) => {
   const [selectedImage, setSelectedImage] = useState<string | null>(null)
+  const [selectedPath, setSelectedPath] = useState<string | null>(null)
   const [selectedFile, setSelectedFile] = useState<File | null>(null)
   const [activeTab, setActiveTab] = useState('1')
   const [page, setPage] = useState(1);
@@ -79,8 +80,9 @@ const MediaManagerModal = ({
       const response = await uploadImage(formData).unwrap()
       const serverPath = response.data.filePath
       getMediasList()
+      setSelectedPath(serverPath)
       setSelectedImage(getUrlMedia(serverPath))
-      return getUrlMedia(serverPath)
+      return serverPath
     } catch (error) {
       toast.error(t('component.media_manager.upload_failed'))
       return ''
@@ -131,7 +133,10 @@ const MediaManagerModal = ({
                   src={url}
                   alt=''
                   className={cn('w-[6.5rem] h-[6.5rem] object-cover cursor-pointer', selectedImage === url ? 'border-2 border-primary' : 'border border-border')}
-                  onClick={() => setSelectedImage(url)}
+                  onClick={() => {
+                    setSelectedImage(url);
+                    setSelectedPath(item.filePath);
+                  }}
                 />
               );
             })}
@@ -159,8 +164,8 @@ const MediaManagerModal = ({
       return; 
     }
 
-    if (selectedImage) {
-      onChoose(selectedImage);
+    if (selectedPath) {
+      onChoose(selectedPath);
       handleCancel();
       return;
     }
@@ -174,6 +179,7 @@ const MediaManagerModal = ({
     setPage(1)
     setSelectedFile(null)
     setSelectedImage(null)
+    setSelectedPath(null)
     onClose()
   }