Add Meta Data section to FileInfo component and update file thumbnail fetching logic

- Introduced a new Meta Data section in the FileInfo component, allowing users to view file metadata.
- Added a fetchFileThumbnail function in ApiServerContext to retrieve file thumbnails, enhancing the user experience with profile images.
- Updated the UserProfileImage component to utilize the new thumbnail fetching logic, improving image loading efficiency.
- Added a hasThumbnails property to the File model to indicate the presence of thumbnail data.

src/components/Dashboard/Management/Files/FileInfo.jsx

@@ -25,6 +25,9 @@ import FilePreview from '../../common/FilePreview.jsx'
 import MissingPlaceholder from '../../common/MissingPlaceholder.jsx'
 import { ApiServerContext } from '../../context/ApiServerContext.jsx'
 import ScrollBox from '../../common/ScrollBox.jsx'
+import JsonObjectIcon from '../../../Icons/JsonObjectIcon.jsx'
+import ObjectProperty from '../../common/ObjectProperty.jsx'
+import { getModelProperty } from '../../../../database/ObjectModels.js'
 
 const log = loglevel.getLogger('FileInfo')
 log.setLevel(config.logLevel)
@@ -95,6 +98,7 @@ const FileInfo = () => {
                 items={[
                   { key: 'info', label: 'File Information' },
                   { key: 'preview', label: 'Preview' },
+                  { key: 'metaData', label: 'Meta Data' },
                   { key: 'notes', label: 'Notes' },
                   { key: 'auditLogs', label: 'Audit Logs' }
                 ]}
@@ -131,7 +135,9 @@ const FileInfo = () => {
               }}
               editLoading={objectFormState.editLoading}
               formValid={objectFormState.formValid}
-              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
+              disabled={
+                objectFormState.beingEditedByOther || objectFormState.loading
+              }
               loading={objectFormState.editLoading}
             />
           </Space>
@@ -164,6 +170,8 @@ const FileInfo = () => {
                       loading={loading}
                       isEditing={isEditing}
                       type='file'
+                      labelWidth={170}
+                      visibleProperties={{ metaData: false }}
                       objectData={objectData}
                     />
                   )}
@@ -188,6 +196,24 @@ const FileInfo = () => {
                 <MissingPlaceholder message={'No file.'} />
               )}
             </InfoCollapse>
+            <InfoCollapse
+              title='Meta Data'
+              icon={<JsonObjectIcon />}
+              active={collapseState.metaData}
+              onToggle={(expanded) => updateCollapseState('metaData', expanded)}
+              collapseKey='metaData'
+            >
+              {objectFormState?.objectData?._id ? (
+                <Card>
+                  <ObjectProperty
+                    {...getModelProperty('file', 'metaData')}
+                    objectData={objectFormState?.objectData}
+                  />
+                </Card>
+              ) : (
+                <MissingPlaceholder message={'No file meta data.'} />
+              )}
+            </InfoCollapse>
             <InfoCollapse
               title='Notes'
               icon={<NoteIcon />}

src/components/Dashboard/common/ActivityIndicator.jsx

@@ -39,9 +39,9 @@ const UserProfileImage = memo(function UserProfileImage({
   profileImageId,
   displayName
 }) {
-  const { fetchFileContent } = useContext(ApiServerContext)
-  const fetchFileContentRef = useRef(fetchFileContent)
-  fetchFileContentRef.current = fetchFileContent
+  const { fetchFileThumbnail } = useContext(ApiServerContext)
+  const fetchFileThumbnailRef = useRef(fetchFileThumbnail)
+  fetchFileThumbnailRef.current = fetchFileThumbnail
 
   const [profileImageUrl, setProfileImageUrl] = useState(null)
   const profileImageUrlRef = useRef(null)
@@ -66,11 +66,11 @@ const UserProfileImage = memo(function UserProfileImage({
     }
 
     let cancelled = false
-    const file = { _id: profileImageId, name: '', extension: '' }
+    const file = { _id: profileImageId }
 
     const loadProfileImage = async () => {
       try {
-        const fileURL = await fetchFileContentRef.current(file, false)
+        const fileURL = await fetchFileThumbnailRef.current(file, 64)
         if (!cancelled) {
           if (profileImageUrlRef.current) {
             URL.revokeObjectURL(profileImageUrlRef.current)

src/components/Dashboard/context/ApiServerContext.jsx

@@ -1438,6 +1438,31 @@ const ApiServerProvider = ({ children }) => {
     }
   }
 
+  const fetchFileThumbnail = async (file, size) => {
+    try {
+      const response = await axios.get(
+        `${config.backendUrl}/files/${file._id}/thumbnail`,
+        {
+          params: { size },
+          headers: {
+            Accept: 'image/jpeg',
+            Authorization: `Bearer ${token}`
+          },
+          responseType: 'blob'
+        }
+      )
+      const blob = new Blob([response.data], {
+        type: response.headers['content-type'] || 'image/jpeg'
+      })
+      return window.URL.createObjectURL(blob)
+    } catch (err) {
+      console.error(err)
+      showError(err, () => {
+        fetchFileThumbnail(file, size)
+      })
+    }
+  }
+
   // Fetch notes for a specific parent
   const fetchNotes = async (parentId) => {
     logger.debug('Fetching notes for parent:', parentId)
@@ -2136,6 +2161,7 @@ const ApiServerProvider = ({ children }) => {
         fetchLoading,
         showError,
         fetchFileContent,
+        fetchFileThumbnail,
         exportToExcel,
         exportToCsv,
         fetchTemplatePreview,

src/database/models/File.js

@@ -167,6 +167,14 @@ export const File = {
       type: 'data',
       readOnly: true,
       required: false
+    },
+    {
+      name: 'hasThumbnails',
+      label: 'Has Thumbnails',
+      type: 'bool',
+      readOnly: true,
+      required: false,
+      columnWidth: 100
     }
   ]
 }