knee-cola/evidencija-rezija
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

supported attachment upload

Browse Source
This commit is contained in:
Nikola Derežić
2024-01-05 11:55:33 +01:00
parent 64c7ee4474
commit 8b7cd45087
3 changed files with 108 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
app/lib/actions.ts
View File

@@ -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: {
"bills.$[elem].name": billName,
"bills.$[elem].paid": billPaid,
"bills.$[elem].attachment": billAttachment,
"bills.$[elem].notes": billNotes,
}
$set: mongoDbSet
}, {
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('/');
}

11
app/lib/db-types.ts
View File

@@ -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 */

43
app/ui/BillEditForm.tsx
View File

@@ -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" />
// 2023-22-12 document GSKG račun za 2023.pdf
// </a>
attachment ?
<a href={`/attachment/${invoiceID}-${id}/${attachment.fileName}`} 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}
</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>);