fix: file download auto and name

apps/foundation/app/(Site)/[slug]/page.tsx

@@ -102,10 +102,11 @@ export default async function UniversalPage({ params }: PageProps) {
       slug,
     });
 
-    if (file?.src) {
+    if (file?.src && file?.fileName) {
       const fileDictionary = await getTranslations('fileDownload');
       return (
         <FileDownload
+          fileName={file.fileName}
           src={file.src}
           strings={{
             fetching: fileDictionary('fetching'),

apps/foundation/locales/en.json

@@ -22,7 +22,7 @@
     "morePosts": "More posts"
   },
   "fileDownload": {
-    "fetching": "Fetching file...",
+    "fetching": "Fetching '{name'}...",
     "clickToDownload": "Click to download",
     "clickToDownloadAria": "Click to download file",
     "openPdfInNewTab": "Open PDF in new tab",

packages/sanity-cms/components/SanityFileDownload.tsx

@@ -1,6 +1,12 @@
+'use client';
+
 import SanityPdf from './SanityPdf';
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { cleanSanityString } from '../lib/string';
 
 type FileDownloadProps = {
+  fileName: string;
   src: string;
   strings: {
     fetching: string;
@@ -11,18 +17,32 @@ type FileDownloadProps = {
   };
 };
 
-export default function FileDownload({ src, strings }: FileDownloadProps) {
-  if (!src) return null;
+export default function FileDownload({ fileName, src, strings }: FileDownloadProps) {
+  const [downloaded, setDownloaded] = useState(false);
+  const router = useRouter();
+  if (!src || !fileName) return null;
+
+  const name = cleanSanityString(fileName);
+  const srcWithParams = new URL(src);
+  srcWithParams.searchParams.set('dl', name);
 
-  if (src.endsWith('.pdf')) {
-    return <SanityPdf src={src} strings={strings} />;
+  if (src.includes('.pdf')) {
+    return <SanityPdf src={src} url={srcWithParams} strings={strings} />;
   }
 
+  // Download file on mount
+  useEffect(() => {
+    if (!downloaded) {
+      setDownloaded(true);
+      void router.push(srcWithParams.href);
+    }
+  }, [src]);
+
   return (
-    <div className="flex flex-col items-center justify-center">
-      <p className="text-center text-sm">{strings.fetching}</p>
+    <div className="my-12 flex flex-col items-center justify-center gap-2">
+      <p className="text-center text-sm">{strings.fetching.replace('{name}', fileName)}</p>
       <a
-        href={src}
+        href={srcWithParams.href}
         className="group"
         target="_blank"
         rel="noopener noreferrer"

packages/sanity-cms/components/SanityPdf.tsx

@@ -3,19 +3,20 @@ import { LinkOutIcon } from '@session/ui/icons/LinkOutIcon';
 
 export type SanityPdfProps = {
   src: string;
+  url: URL;
   strings: {
     openPdfInNewTab: string;
     openPdfInNewTabAria: string;
   };
 };
 
-export default function SanityPdf({ src, strings }: SanityPdfProps) {
-  if (!src) return null;
+export default function SanityPdf({ src, url, strings }: SanityPdfProps) {
+  if (!url || !src) return null;
 
   return (
     <main className="flex h-full min-h-screen w-full max-w-3xl flex-col items-center justify-center gap-4">
       <NavLink
-        href={src}
+        href={url.href}
         aria-label={strings.openPdfInNewTabAria}
         className="inline-flex items-center justify-center gap-2 align-middle"
       >

packages/sanity-cms/queries/getFile.ts

@@ -7,6 +7,7 @@ const QUERY_GET_FILES_WITH_SLUG = groq`*[_type == 'cmsFile' && slug.current == $
 type QUERY_GET_FILES_WITH_SLUG_RETURN_TYPE = Array<
   FileSchemaType & {
     src: string;
+    fileName: string;
   }
 >;
 

packages/sanity-cms/schemas/file.tsx

@@ -12,6 +12,13 @@ export const fileFields = [
     name: 'file',
     type: 'file',
   }),
+  defineField({
+    title: 'File Name',
+    name: 'fileName',
+    type: 'string',
+    description: 'The name of the file when it is downloaded',
+    validation: (Rule) => Rule.required(),
+  }),
 ];
 
 export const fileSchema = defineType({