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

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">