[#215] updated the admin ui to allow displaying private files

ui/src/components/records/RecordFileThumb.svelte

@@ -2,6 +2,7 @@
     import ApiClient from "@/utils/ApiClient";
     import CommonHelper from "@/utils/CommonHelper";
     import PreviewPopup from "@/components/base/PreviewPopup.svelte";
+    import { privateFilesCollectionsCache } from "@/stores/collections";
 
     export let record = null;
     export let filename = "";
@@ -9,39 +10,72 @@
 
     let previewPopup;
     let thumbUrl = "";
-    let originalUrl = ApiClient.getFileUrl(record, filename);
+    let originalUrl = "";
+    let token = "";
+    let isLoadingToken = false;
+
+    $: withToken =
+        typeof $privateFilesCollectionsCache[record?.collectionId] !== "undefined"
+            ? $privateFilesCollectionsCache[record?.collectionId]
+            : true;
+
+    $: if (withToken) {
+        loadFileToken();
+    } else {
+        token = "";
+    }
 
     $: type = CommonHelper.getFileType(filename);
 
     $: hasPreview = ["image", "audio", "video"].includes(type) || filename.endsWith(".pdf");
 
-    $: thumbUrl = originalUrl ? originalUrl + "?thumb=100x100" : "";
+    $: originalUrl = !isLoadingToken ? ApiClient.files.getUrl(record, filename, { token }) : "";
+
+    $: thumbUrl = !isLoadingToken
+        ? ApiClient.files.getUrl(record, filename, { thumb: "100x100", token: token })
+        : "";
+
+    async function loadFileToken() {
+        isLoadingToken = true;
+
+        try {
+            token = await ApiClient.getAdminFileToken();
+        } catch (err) {
+            console.warn("File token failure:", err);
+        }
+
+        isLoadingToken = false;
+    }
 
     function onError() {
         thumbUrl = "";
     }
 </script>
 
-<a
-    class="thumb {size ? `thumb-${size}` : ''}"
-    href={originalUrl}
-    target="_blank"
-    rel="noreferrer"
-    title={(hasPreview ? "Preview" : "Download") + " " + filename}
-    on:click|stopPropagation={(e) => {
-        if (hasPreview) {
-            e.preventDefault();
-            previewPopup?.show(originalUrl);
-        }
-    }}
->
-    {#if type === "image"}
-        <img src={thumbUrl} alt={filename} title="Preview {filename}" on:error={onError} />
-    {:else if type === "video" || type === "audio"}
-        <i class="ri-video-line" />
-    {:else}
-        <i class="ri-file-3-line" />
-    {/if}
-</a>
+{#if isLoadingToken}
+    <div class="thumb {size ? `thumb-${size}` : ''}" />
+{:else}
+    <a
+        class="thumb {size ? `thumb-${size}` : ''}"
+        href={originalUrl}
+        target="_blank"
+        rel="noreferrer"
+        title={(hasPreview ? "Preview" : "Download") + " " + filename}
+        on:click|stopPropagation={(e) => {
+            if (hasPreview) {
+                e.preventDefault();
+                previewPopup?.show(originalUrl);
+            }
+        }}
+    >
+        {#if type === "image"}
+            <img src={thumbUrl} alt={filename} title="Preview {filename}" on:error={onError} />
+        {:else if type === "video" || type === "audio"}
+            <i class="ri-video-line" />
+        {:else}
+            <i class="ri-file-3-line" />
+        {/if}
+    </a>
+{/if}
 
 <PreviewPopup bind:this={previewPopup} />

ui/src/components/records/fields/FileField.svelte

@@ -90,7 +90,7 @@
 
                 <div class="content">
                     <a
-                        href={ApiClient.getFileUrl(record, filename)}
+                        href={ApiClient.files.getUrl(record, filename)}
                         class="txt-ellipsis {isDeleted ? 'txt-strikethrough txt-hint' : 'link-primary'}"
                         title="Download"
                         target="_blank"