hotfix image document with no file generated

Author: BranDavidSebastian

src/core/media/documents/document-show/DocumentShowController.vue

@@ -36,6 +36,7 @@ type DocumentData = {
   description?: string | null;
   documentLanguage?: string | null;
   documentType?: { id: string; name: string; code?: string | null } | null;
+  image?: { size?: number | string | null; name?: string | null; url?: string | null } | null;
   file?: { size?: number | string | null; name?: string | null; url?: string | null } | null;
 };
 

src/core/media/documents/document-show/containers/document-show-view/DocumentShowView.vue

@@ -5,7 +5,7 @@ import { Button } from "../../../../../../shared/components/atoms/button";
 import { Icon } from "../../../../../../shared/components/atoms/icon";
 import { Image } from "../../../../../../shared/components/atoms/image";
 import { Link } from "../../../../../../shared/components/atoms/link";
-import { humanFileSize, truncateText } from "../../../../files/media";
+import { getFileName, getFileSize, truncateText } from "../../../../files/media";
 import { Toast } from "../../../../../../shared/modules/toast";
 import PreviewDocument from "../../../../files/containers/PreviewDocument.vue";
 
@@ -21,6 +21,7 @@ const props = defineProps<{
     description?: string | null;
     documentLanguage?: string | null;
     documentType?: { id: string; name: string; code?: string | null } | null;
+    image?: { size?: number | string | null; name?: string | null; url?: string | null } | null;
     file?: { size?: number | string | null; name?: string | null } | null;
   }
 }>();
@@ -46,7 +47,7 @@ const openPreview = () => {
     return;
   }
   previewDocumentUrl.value = props.document.fileUrl;
-  previewDocumentName.value = props.document.file?.name || '';
+  previewDocumentName.value = getFileName(props.document);
   previewModalVisible.value = true;
 };
 
@@ -58,8 +59,9 @@ const downloadDocument = () => {
   link.href = props.document.fileUrl;
   link.target = '_blank';
   link.rel = 'noopener noreferrer';
-  if (props.document.file?.name) {
-    link.download = props.document.file.name;
+  const fileName = getFileName(props.document);
+  if (fileName !== '-') {
+    link.download = fileName;
   }
   window.document.body.appendChild(link);
   link.click();
@@ -95,11 +97,11 @@ const downloadDocument = () => {
     <Flex vertical>
       <FlexCell>
         <label class="font-semibold block text-sm leading-6 text-gray-900">{{ t('shared.labels.name') }}</label>
-        <span class="text-gray-900">{{ document.file?.name || '—' }}</span>
+        <span class="text-gray-900">{{ getFileName(document) }}</span>
       </FlexCell>
       <FlexCell>
         <label class="mt-2 font-semibold block text-sm leading-6 text-gray-900">{{ t('media.media.labels.fileSize') }}</label>
-        <span class="text-gray-900">{{ document.file?.size ? humanFileSize(document.file.size) : '—' }}</span>
+        <span class="text-gray-900">{{ getFileSize(document) }}</span>
       </FlexCell>
       <FlexCell>
         <label class="mt-2 font-semibold block text-sm leading-6 text-gray-900">{{ t('media.documents.labels.fileUrl') }}</label>

src/core/media/files/media.ts

@@ -28,18 +28,53 @@ export const getRouteName = (type: string) => {
   }
 };
 
-export const getFileName = (media: any) => {
-  const cleanFileName = (name) => name.replace(/^images\//, '');
+const cleanFileName = (name?: string | null) => (name || '').replace(/^images\//, '');
+
+const getNameFromUrl = (value?: string | null) => {
+  if (!value) {
+    return '';
+  }
+  const cleanValue = value.split('#')[0].split('?')[0];
+  return cleanValue.split('/').pop() || cleanValue;
+};
+
+const getDocumentBinary = (media: any) => {
+  if (media?.type !== TYPE_DOCUMENT) {
+    return null;
+  }
+
+  if (media?.file) {
+    return media.file;
+  }
+
+  if (media?.isDocumentImage && media?.image) {
+    return media.image;
+  }
 
-  if (media.type === TYPE_IMAGE) return truncateText(cleanFileName(media.image.name), 25);
-  if (media.type === TYPE_DOCUMENT) return truncateText(cleanFileName(media.file.name), 25);
-  if (media.type === TYPE_VIDEO) return truncateText(media.videoUrl, 25);
+  return null;
+};
+
+export const getFileName = (media: any) => {
+  if (media?.type === TYPE_IMAGE) {
+    const fileName = cleanFileName(media?.image?.name) || cleanFileName(getNameFromUrl(media?.imageWebUrl));
+    return fileName ? truncateText(fileName, 25) : '-';
+  }
+  if (media?.type === TYPE_DOCUMENT) {
+    const documentBinary = getDocumentBinary(media);
+    const fileName = cleanFileName(documentBinary?.name)
+      || cleanFileName(getNameFromUrl(documentBinary?.url || media?.fileUrl))
+      || cleanFileName(media?.title);
+    return fileName ? truncateText(fileName, 25) : '-';
+  }
+  if (media?.type === TYPE_VIDEO) {
+    return media?.videoUrl ? truncateText(media.videoUrl, 25) : '-';
+  }
   return '-';
 };
 
 export const getFileSize = (media: any) => {
-  if (media.type === TYPE_IMAGE) return humanFileSize(media.image.size);
-  if (media.type === TYPE_DOCUMENT) return humanFileSize(media.file.size);
+  if (media?.type === TYPE_IMAGE) return humanFileSize(media?.image?.size);
+  if (media?.type === TYPE_DOCUMENT) return humanFileSize(getDocumentBinary(media)?.size);
   return '-';
 };
 
@@ -52,10 +87,19 @@ export const formatDate = (dateString) => {
 };
 
 export const humanFileSize = (bytes, si=false, dp=1) => {
+  if (bytes === null || bytes === undefined || bytes === '') {
+    return '-';
+  }
+
+  let normalizedBytes = typeof bytes === 'number' ? bytes : Number(bytes);
+  if (Number.isNaN(normalizedBytes)) {
+    return '-';
+  }
+
   const thresh = si ? 1000 : 1024;
 
-  if (Math.abs(bytes) < thresh) {
-    return bytes + ' B';
+  if (Math.abs(normalizedBytes) < thresh) {
+    return normalizedBytes + ' B';
   }
 
   const units = si
@@ -65,10 +109,10 @@ export const humanFileSize = (bytes, si=false, dp=1) => {
   const r = 10**dp;
 
   do {
-    bytes /= thresh;
+    normalizedBytes /= thresh;
     ++u;
-  } while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
+  } while (Math.round(Math.abs(normalizedBytes) * r) / r >= thresh && u < units.length - 1);
 
 
-  return bytes.toFixed(dp) + ' ' + units[u];
+  return normalizedBytes.toFixed(dp) + ' ' + units[u];
 }

src/shared/api/queries/media.js

@@ -173,7 +173,13 @@ export const fileQuery = gql`
           id
           type
           fileUrl
+          isDocumentImage
           updatedAt
+          image {
+            name
+            size
+            url
+          }
           file {
             name
             size
@@ -212,6 +218,11 @@ export const getFileQuery = gql`
       fileUrl
       imageWebUrl
       isDocumentImage
+      image {
+        size
+        name
+        url
+      }
       title
       description
       documentLanguage
@@ -252,6 +263,7 @@ export const mediaProductThroughQuery = gql`
               id
               proxyId
               type
+              isDocumentImage
               imageType
               updatedAt
               title