supported attachment upload

app/lib/actions.ts

@@ -5,6 +5,7 @@ import { revalidatePath } from 'next/cache';
 import { redirect } from 'next/navigation';
 import clientPromise from './mongodb';
 import { ObjectId } from 'mongodb';
+import { BillAttachment } from './db-types';
 
 export type State = {
     errors?: {
@@ -18,17 +19,59 @@ export type State = {
 const FormSchema = z.object({
     _id: z.string(),
     billName: z.coerce.string().min(1, "Bill Name is required."),
-    billAttachment: z.object({ }),
     billNotes: z.string(),
   });
 
 const UpdateBill = FormSchema.omit({ _id: true });
 
+/**
+ * converts the file to a format stored in the database
+ * @param billAttachment 
+ * @returns 
+ */
+const serializeAttachment = async (billAttachment: File | null) => {
+
+    if (!billAttachment) {
+        return null;
+    }
+
+    const {
+        name: fileName,
+        size: fileSize,
+        type: fileType,
+        lastModified: fileLastModified,
+    } = billAttachment;
+
+    if(!fileName || fileName === 'undefined') {
+        return null;
+    }
+
+    // convert the file contents to a base64 string
+    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),
+        fileSize,
+        fileType,
+        fileLastModified,
+        fileContentsBase64,
+    } as BillAttachment);
+}
+
+/**
+ * Server-side action which creates a new bill
+ * @param locationId location of the bill
+ * @param billId ID of the bill
+ * @param prevState previous state of the form
+ * @param formData form data
+ * @returns 
+ */
 export async function updateBill(locationId: string, billId:string, prevState:State, formData: FormData) {
 
     const validatedFields = UpdateBill.safeParse({
         billName: formData.get('billName'),
-        billAttachment: formData.get('billAttachment'),
         billNotes: formData.get('billNotes'),
     });
 
@@ -43,7 +86,6 @@ export async function updateBill(locationId: string, billId:string, prevState:St
 
     const {
         billName,
-        billAttachment,
         billNotes,
     } = validatedFields.data;
 
@@ -52,6 +94,22 @@ export async function updateBill(locationId: string, billId:string, prevState:St
     // update the bill in the mongodb
     const client = await clientPromise;
     const db = client.db("rezije");
+    
+    const billAttachment = await serializeAttachment(formData.get('billAttachment') as File);
+
+    // if there is an attachment, update the attachment field
+    // otherwise, do not update the attachment field
+    const mongoDbSet = billAttachment ? {
+        "bills.$[elem].name": billName,
+        "bills.$[elem].paid": billPaid,
+        "bills.$[elem].attachment": billAttachment,
+        "bills.$[elem].notes": billNotes,
+    }: {
+        "bills.$[elem].name": billName,
+        "bills.$[elem].paid": billPaid,
+        "bills.$[elem].notes": billNotes,
+    };
+
 
     // find a location with the given locationID
     const post = await db.collection<Location>("lokacije").updateOne(
@@ -59,12 +117,7 @@ export async function updateBill(locationId: string, billId:string, prevState:St
             _id: locationId // find a location with the given locationID
         },
         {
-            $set: {
+            $set: mongoDbSet
-                "bills.$[elem].name": billName,
-                "bills.$[elem].paid": billPaid,
-                "bills.$[elem].attachment": billAttachment,
-                "bills.$[elem].notes": billNotes,
-            }
         }, {
             arrayFilters: [
                 { "elem._id": { $eq: new ObjectId(billId) } } // find a bill with the given billID
@@ -75,4 +128,8 @@ export async function updateBill(locationId: string, billId:string, prevState:St
     revalidatePath('/');
     // go to the bill list
     redirect('/');
+}
+
+export async function gotoHome() {
+    redirect('/');   
 }

app/lib/db-types.ts

@@ -1,5 +1,13 @@
 import { ObjectId } from "mongodb";
 
+export interface BillAttachment {
+    fileName: string;
+    fileSize: number;
+    fileType: string;
+    fileLastModified: number;
+    fileContentsBase64: string;
+};
+
 /** Bill basic data */
 export interface LocationBase {
     name: string;
@@ -25,7 +33,8 @@ export interface PlainLocation {
 export interface BillBase {
     name: string;
     paid: boolean;
-    document?: string|null;
+    attachment?: BillAttachment|null;
+    notes?: string|null;
 };
 
 /** bill object in the form returned by MongoDB */

app/ui/BillEditForm.tsx

@@ -1,30 +1,48 @@
 "use client";
 
-import { TrashIcon } from "@heroicons/react/24/outline";
+import { DocumentIcon, TrashIcon } from "@heroicons/react/24/outline";
 import { PlainBill } from "../lib/db-types";
 import { FC } from "react";
 import { useFormState } from "react-dom";
-import { updateBill } from "../lib/actions";
+import { gotoHome, updateBill } from "../lib/actions";
+import { redirect } from 'next/navigation';
 
+// Next.js does not encode an utf-8 file name correctly when sending a form with a file attachment
+// This is a workaround for that
+const updateBill2 = (locationId: string, billId:string, prevState:any, formData: FormData) => {
+    console.log('updateBill2', formData.get('billAttachment'));
+    
+    // URL encode the file name of the attachment so it is correctly sent to the server
+    const billAttachment = formData.get('billAttachment') as File;
+    formData.set('billAttachment', billAttachment, encodeURIComponent(billAttachment.name));
+
+    return updateBill(locationId, billId, prevState, formData);
+}
 
 export interface BillEditFormProps {
     invoiceID: string,
     bill: PlainBill
 }
 
-export const BillEditForm:FC<BillEditFormProps> = ({ invoiceID, bill: { id, name, paid } }) => {
+export const BillEditForm:FC<BillEditFormProps> = ({ invoiceID, bill: { id, name, paid, attachment, notes } }) => {
 
     const initialState = { message: null, errors: {} };
-    const updateBillWithId = updateBill.bind(null, invoiceID, id);
+    const updateBillWithId = updateBill2.bind(null, invoiceID, id);
     const [ state, dispatch ] = useFormState(updateBillWithId, initialState);
 
+    // redirect to the main page
+    const handleCancel = () => {
+        console.log('handleCancel');
+        gotoHome();
+    };
+
     return(
     <div className="card card-compact card-bordered max-w-sm bg-base-100 shadow-s my-1">
         <div className="card-body">
             <form action={ dispatch }>
                 <TrashIcon className="h-[1em] w-[1em] absolute cursor-pointer text-error bottom-5 right-4 text-2xl" />
 
-                <input id="billName" name="billName" type="text" placeholder="Bill name" className="input input-bordered w-full" defaultValue={name} />
+                <input id="billName" name="billName" type="text" placeholder="Bill name" className="input input-bordered w-full" defaultValue={name} required />
                 <div id="status-error" aria-live="polite" aria-atomic="true">
                     {state.errors?.billName &&
                     state.errors.billName.map((error: string) => (
@@ -33,13 +51,15 @@ export const BillEditForm:FC<BillEditFormProps> = ({ invoiceID, bill: { id, name
                         </p>
                     ))}
                 </div>
-
                 {
                     // <textarea className="textarea textarea-bordered my-1 w-full max-w-sm block" placeholder="Opis" value="Pričuva, Voda, Smeće"></textarea>
-                    // <a href="#document.pdf" className='text-center block max-w-[24em] text-nowrap truncate inline-block'>
+
-                    // <DocumentIcon className="h-[1em] w-[1em] text-2xl inline-block mr-1" />
+                    attachment ? 
-                    // 2023-22-12 document GSKG račun za 2023.pdf
+                    <a href={`/attachment/${invoiceID}-${id}/${attachment.fileName}`} className='text-center block max-w-[24em] text-nowrap truncate inline-block mt-4'>
-                    // </a>
+                        <DocumentIcon className="h-[1em] w-[1em] text-2xl inline-block mr-1" />
+                        {attachment.fileName}
+                    </a>
+                    : null
                 }
                 <input id="billAttachment" name="billAttachment" type="file" className="file-input file-input-bordered w-full max-w-sm file-input-xs my-2" />
                 <div id="status-error" aria-live="polite" aria-atomic="true">
@@ -58,7 +78,7 @@ export const BillEditForm:FC<BillEditFormProps> = ({ invoiceID, bill: { id, name
                     </label>
                 </div>
 
-                <textarea id="billNotes" name="billNotes" className="textarea textarea-bordered my-2 w-full max-w-sm block" placeholder="Note"></textarea>
+                <textarea id="billNotes" name="billNotes" className="textarea textarea-bordered my-2 w-full max-w-sm block" placeholder="Note" defaultValue={notes ?? ''}></textarea>
                 <div id="status-error" aria-live="polite" aria-atomic="true">
                     {state.errors?.billNotes &&
                     state.errors.billNotes.map((error: string) => (
@@ -76,6 +96,7 @@ export const BillEditForm:FC<BillEditFormProps> = ({ invoiceID, bill: { id, name
                     }
                 </div>
                 <button type="submit" className="btn btn-primary">Save</button>
+                <button type="button" className="btn btn-neutral ml-3" onClick={handleCancel}>Cancel</button>
             </form>
         </div>
     </div>);