[#6137] renew the superuser file token cache when clicking on the thumb preview or download link

ui/src/components/base/PreviewPopup.svelte

@@ -4,22 +4,24 @@
 
     let panel;
     let url = "";
+    let urlOrFactory;
 
     $: queryParamsIndex = url.indexOf("?");
 
     $: filename = url.substring(
         url.lastIndexOf("/") + 1,
-        queryParamsIndex > 0 ? queryParamsIndex : undefined
+        queryParamsIndex > 0 ? queryParamsIndex : undefined,
     );
 
     $: type = CommonHelper.getFileType(filename);
 
-    export function show(newUrl) {
-        if (newUrl === "") {
+    export async function show(urlOrFactoryArg) {
+        urlOrFactory = urlOrFactoryArg;
+        if (!urlOrFactory) {
             return;
         }
 
-        url = newUrl;
+        url = await resolveUrlOrFactory();
 
         panel?.show();
     }
@@ -27,6 +29,27 @@
     export function hide() {
         return panel?.hide();
     }
+
+    async function resolveUrlOrFactory() {
+        if (typeof urlOrFactory == "function") {
+            return await urlOrFactory();
+        }
+
+        // string or Promise
+        return await urlOrFactory;
+    }
+
+    async function openInNewTab() {
+        try {
+            // resolve again because it may have expired
+            url = await resolveUrlOrFactory();
+            window.open(url, "_blank", "noreferrer,noopener");
+        } catch (err) {
+            if (!err.isAbort) {
+                console.warn("openInNewTab file token failure:", err);
+            }
+        }
+    }
 </script>
 
 <OverlayPanel bind:this={panel} class="preview preview-{type}" btnClose={false} popup on:show on:hide>
@@ -45,16 +68,16 @@
     {/if}
 
     <svelte:fragment slot="footer">
-        <a
-            href={url}
+        <button
+            type="button"
             title={filename}
-            target="_blank"
-            rel="noreferrer noopener"
             class="link-hint txt-ellipsis inline-flex"
+            on:auxclick={openInNewTab}
+            on:click={openInNewTab}
         >
             {filename}
             <i class="ri-external-link-line" />
-        </a>
+        </button>
         <div class="flex-fill" />
         <button type="button" class="btn btn-transparent" on:click={hide}>Close</button>
     </svelte:fragment>

ui/src/components/records/RecordFileThumb.svelte

@@ -9,23 +9,20 @@
 
     let previewPopup;
     let thumbUrl = "";
-    let originalUrl = "";
     let token = "";
     let isLoadingToken = true;
 
-    loadFileToken();
+    loadThumbUrlToken();
 
     $: type = CommonHelper.getFileType(filename);
 
     $: hasPreview = ["image", "audio", "video"].includes(type) || filename.endsWith(".pdf");
 
-    $: originalUrl = !isLoadingToken ? ApiClient.files.getURL(record, filename, { token }) : "";
-
     $: thumbUrl = !isLoadingToken
         ? ApiClient.files.getURL(record, filename, { thumb: "100x100", token: token })
         : "";
 
-    async function loadFileToken() {
+    async function loadThumbUrlToken() {
         isLoadingToken = true;
 
         try {
@@ -45,17 +42,26 @@
 {#if isLoadingToken}
     <div class="thumb {size ? `thumb-${size}` : ''}" />
 {:else}
-    <a
+    <button
+        type="button"
         draggable={false}
-        class="thumb {size ? `thumb-${size}` : ''}"
-        href={originalUrl}
-        target="_blank"
-        rel="noreferrer"
+        class="handle thumb {size ? `thumb-${size}` : ''}"
         title={(hasPreview ? "Preview" : "Download") + " " + filename}
-        on:click|stopPropagation={(e) => {
-            if (hasPreview) {
-                e.preventDefault();
-                previewPopup?.show(originalUrl);
+        on:click|stopPropagation={async () => {
+            if (!hasPreview) {
+                return;
+            }
+
+            try {
+                // refetch the token because it could have expired
+                previewPopup?.show(async () => {
+                    token = await ApiClient.getSuperuserFileToken(record.collectionId);
+                    return ApiClient.files.getURL(record, filename, { token });
+                });
+            } catch (err) {
+                if (!err.isAbort) {
+                    console.warn("Preview file token failure:", err);
+                }
             }
         }}
     >
@@ -73,7 +79,7 @@
         {:else}
             <i class="ri-file-3-line" />
         {/if}
-    </a>
+    </button>
 {/if}
 
 {#if hasPreview}

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

@@ -1,5 +1,4 @@
 <script>
-    import { onMount } from "svelte";
     import tooltip from "@/actions/tooltip";
     import ApiClient from "@/utils/ApiClient";
     import CommonHelper from "@/utils/CommonHelper";
@@ -18,7 +17,6 @@
     let fileInput;
     let filesListElem;
     let isDragOver = false;
-    let fileToken = "";
 
     // normalize uploadedFiles type
     $: if (!Array.isArray(uploadedFiles)) {
@@ -97,9 +95,15 @@
         uploadedFiles = uploadedFiles;
     }
 
-    onMount(async () => {
-        fileToken = await ApiClient.getSuperuserFileToken(record.collectionId);
-    });
+    async function openInNewTab(filename) {
+        try {
+            let token = await ApiClient.getSuperuserFileToken(record.collectionId);
+            let url = ApiClient.files.getURL(record, filename, { token });
+            window.open(url, "_blank", "noreferrer, noopener");
+        } catch (err) {
+            console.warn("openInNewTab file token failure:", err);
+        }
+    }
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -141,18 +145,18 @@
                         </div>
 
                         <div class="content">
-                            <a
+                            <button
+                                type="button"
                                 draggable={false}
-                                href={ApiClient.files.getURL(record, filename, { token: fileToken })}
                                 class="txt-ellipsis {isDeleted
-                                    ? 'txt-strikethrough txt-hint'
+                                    ? 'txt-strikethrough link-hint'
                                     : 'link-primary'}"
                                 title="Download"
-                                target="_blank"
-                                rel="noopener noreferrer"
+                                on:auxclick={() => openInNewTab(filename)}
+                                on:click={() => openInNewTab(filename)}
                             >
                                 {filename}
-                            </a>
+                            </button>
                         </div>
 
                         <div class="actions">

ui/src/components/settings/BackupsList.svelte

@@ -57,8 +57,7 @@
 
         try {
             const token = await ApiClient.getSuperuserFileToken();
-            const url = ApiClient.backups.getDownloadURL(token, name);
-            CommonHelper.download(url);
+            CommonHelper.download(ApiClient.backups.getDownloadURL(token, name));
         } catch (err) {
             if (!err.isAbort) {
                 ApiClient.error(err);