implemente attachemtn download route

app/attachment/[id]/not-found.tsx

@@ -0,0 +1,18 @@
+import Link from 'next/link';
+import { FaceFrownIcon } from '@heroicons/react/24/outline';
+ 
+export default function NotFound() {
+  return (
+    <main className="flex h-full flex-col items-center justify-center gap-2">
+      <FaceFrownIcon className="w-10 text-gray-400" />
+      <h2 className="text-xl font-semibold">404 File Not Found</h2>
+      <p>Could not find the requested attachment.</p>
+      <Link
+        href="/"
+        className="mt-4 rounded-md bg-blue-500 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-400"
+      >
+        Go Back
+      </Link>
+    </main>
+  );
+}

app/attachment/[id]/route.tsx

@@ -0,0 +1,27 @@
+import { fetchBillById } from '@/app/lib/fetchBillById';
+import { notFound } from 'next/navigation';
+
+export async function GET(request: Request, { params:{ id } }: { params: { id:string } }) {
+    const [invoiceID, billID] = id.split('-');
+
+    const bill = await fetchBillById(invoiceID, billID);
+
+    if(!bill?.attachment) {
+        notFound();
+    }
+
+    // convert fileContentsBase64 from Base64 string to binary string
+    const fileContentsBuffer = Buffer.from(bill.attachment.fileContentsBase64, 'base64');
+
+    // convert fileContentsBuffer to format that can be sent to the client
+    const fileContents = new Uint8Array(fileContentsBuffer);
+    
+    return new Response(fileContents, {
+        status: 200,
+        headers: {
+            'Content-Type': "application/octet-stream",
+            'Content-Disposition': `attachment; filename="${bill.attachment.fileName}"`,
+            'Last-Modified': `${bill.attachment.fileLastModified}`
+        }
+    });
+}

app/bills/[id]/edit/page.tsx

@@ -1,38 +1,10 @@
 import { PlainLocation, PlainBill, MongoLocation } from '@/app/lib/db-types';
+import { fetchBillById } from '@/app/lib/fetchBillById';
 import clientPromise from '@/app/lib/mongodb';
 import { BillEditForm } from '@/app/ui/BillEditForm';
 import { ObjectId } from 'mongodb';
 import { notFound } from 'next/navigation';
 
-const fetchBillById = async (locationID:string, billID:string) => {
-    const client = await clientPromise;
-    const db = client.db("rezije");
-
-    // find a location with the given locationID
-    const billLocation = await db.collection<MongoLocation>("lokacije").findOne({ _id: locationID })
-
-    if(!billLocation) {
-        console.log(`Location ${locationID} not found`);
-        return(null);
-    }
-
-    // find a bill with the given billID
-    const mongoBill = billLocation?.bills.find(({ _id }) => _id.toString() === billID);
-
-    if(!mongoBill) {
-        console.log('Bill not found');
-        return(null);
-    }
-
-    const { _id, ...billBase  } = mongoBill;
-
-    return({
-        id: _id.toString(),
-        ...billBase
-    } as PlainBill);
-
-}
-
 export default async function Page({ params:{ id } }: { params: { id:string } }) {
 
     const [invoiceID, billID] = id.split('-');

app/lib/actions.ts

@@ -46,13 +46,14 @@ const serializeAttachment = async (billAttachment: File | null) => {
         return null;
     }
 
-    // convert the file contents to a base64 string
+    // convert the billAttachment file contents to format that can be stored in the database
     const fileContents = await billAttachment.arrayBuffer();
     const fileContentsBase64 = Buffer.from(fileContents).toString('base64');
 
+
     // create an object to store the file in the database
     return({
-        fileName: decodeURIComponent(fileName),
+        fileName,
         fileSize,
         fileType,
         fileLastModified,

app/lib/fetchBillById.ts

@@ -0,0 +1,31 @@
+import { PlainBill, MongoLocation } from '@/app/lib/db-types';
+import clientPromise from '@/app/lib/mongodb';
+
+export const fetchBillById = async (locationID:string, billID:string) => {
+    const client = await clientPromise;
+    const db = client.db("rezije");
+
+    // find a location with the given locationID
+    const billLocation = await db.collection<MongoLocation>("lokacije").findOne({ _id: locationID })
+
+    if(!billLocation) {
+        console.log(`Location ${locationID} not found`);
+        return(null);
+    }
+
+    // find a bill with the given billID
+    const mongoBill = billLocation?.bills.find(({ _id }) => _id.toString() === billID);
+
+    if(!mongoBill) {
+        console.log('Bill not found');
+        return(null);
+    }
+
+    const { _id, ...billBase  } = mongoBill;
+
+    return({
+        id: _id.toString(),
+        ...billBase
+    } as PlainBill);
+
+}

app/ui/BillEditForm.tsx

@@ -55,9 +55,9 @@ export const BillEditForm:FC<BillEditFormProps> = ({ invoiceID, bill: { id, name
                     // <textarea className="textarea textarea-bordered my-1 w-full max-w-sm block" placeholder="Opis" value="Pričuva, Voda, Smeće"></textarea>
 
                     attachment ? 
-                    <a href={`/attachment/${invoiceID}-${id}/${attachment.fileName}`} className='text-center block max-w-[24em] text-nowrap truncate inline-block mt-4'>
+                    <a href={`/attachment/${invoiceID}-${id}/${attachment.fileName}`} target="_blank" className='text-center block max-w-[24em] text-nowrap truncate inline-block mt-4'>
                         <DocumentIcon className="h-[1em] w-[1em] text-2xl inline-block mr-1" />
-                        {attachment.fileName}
+                        {decodeURIComponent(attachment.fileName)}
                     </a>
                     : null
                 }