bar code imaghe is saved to DB

app/lib/actions/billActions.ts

@@ -135,6 +135,7 @@ export const updateOrAddBill = withUser(async (user:AuthenticatedUser, locationI
     } = validatedFields.data;
 
     const billPaid = formData.get('billPaid') === 'on';
+    const barcodeImage = formData.get('barcodeImage')?.valueOf() as string;
 
     // update the bill in the mongodb
     const dbClient = await getDbClient();
@@ -151,11 +152,14 @@ export const updateOrAddBill = withUser(async (user:AuthenticatedUser, locationI
             "bills.$[elem].attachment": billAttachment,
             "bills.$[elem].notes": billNotes,
             "bills.$[elem].payedAmount": payedAmount,
+            "bills.$[elem].barcodeImage": barcodeImage,
+            
         }: {
             "bills.$[elem].name": billName,
             "bills.$[elem].paid": billPaid,
             "bills.$[elem].notes": billNotes,
             "bills.$[elem].payedAmount": payedAmount,
+            "bills.$[elem].barcodeImage": barcodeImage,
         };
 
         // find a location with the given locationID
@@ -186,7 +190,8 @@ export const updateOrAddBill = withUser(async (user:AuthenticatedUser, locationI
                         paid: billPaid,
                         attachment: billAttachment,
                         notes: billNotes,
-                        payedAmount
+                        payedAmount,
+                        barcodeImage,
                     }
                 }
             });

app/lib/db-types.ts

@@ -44,4 +44,6 @@ export interface Bill {
     attachment?: BillAttachment|null;
     /** (optional) notes */
     notes?: string|null;
+    /** (optional) image data containing PDF471 bar code */
+    barcodeImage?:string;
 };

app/lib/pdf/barcodeDecoder.ts

@@ -7,7 +7,7 @@ import { BarcodeFormat, DecodeHintType, Result } from '@zxing/library';
 export type BillInfo = {
     header: string,
     currency: string,
-    ammount: number,
+    amount: number,
     payerName: string,
     payerAddress: string,
     payerTown: string,
@@ -32,7 +32,7 @@ export type BillInfo = {
  *    Decoded into:
  *        header: HRVHUB30
  *        currency:EUR
- *        ammount:000000000012422
+ *        amount:000000000012422
  *        payerName:DEREŽIĆ NIKOLA
  *        payerAddress:ULICA DIVKA BUDAKA 17/17
  *        payerTown:10000 ZAGREB
@@ -50,7 +50,7 @@ const parseHubText = (text: string) => {
     const [
         header,
         currency,
-        ammount,
+        amount,
         payerName,
         payerAddress,
         payerTown,
@@ -67,7 +67,7 @@ const parseHubText = (text: string) => {
     return {
         header,
         currency,
-        ammount: parseInt(ammount, 10),
+        amount: parseInt(amount, 10),
         payerName,
         payerAddress,
         payerTown,
@@ -231,13 +231,7 @@ const copyBarcodeImage = (canvas:HTMLCanvasElement, decoderResult:Result) => {
     // Convert the temporary canvas to a data URL
     const dataURL = tempCanvas.toDataURL();
 
-    // Create a new Image object
-    const barcodeImage = new Image();
-
-    // Set the src of the image object to the data URL
-    barcodeImage.src = dataURL;
-
-    return(barcodeImage);
+    return(dataURL);
 }
 
 /** Finds PDF417 code within a file and decodes it */
@@ -259,7 +253,7 @@ const decodeFromFile = async (file:File) => {
  * @param {Event} event - The change event from an HTMLInputElement.
  * @return {Promise<HTMLCanvasElement | null>} The canvas with the first page of the PDF, or null if the document is not a PDF.
  */
-export async function findDecodePdf417(event: React.ChangeEvent<HTMLInputElement>): Promise<{ billInfo: BillInfo, barcodeImage:HTMLImageElement } | null> {
+export async function findDecodePdf417(event: React.ChangeEvent<HTMLInputElement>): Promise<{ billInfo: BillInfo, barcodeImage:string } | null> {
     const file = (event.target as HTMLInputElement).files?.[0];
 
     if(!file) {

app/ui/BillEditForm.tsx

@@ -25,22 +25,36 @@ export interface BillEditFormProps {
 
 export const BillEditForm:FC<BillEditFormProps> = ({ location, bill }) => {
 
-    const { _id: billID, name, paid, attachment, notes, payedAmount } = bill ?? { _id:undefined, name:"", paid:false, notes:"" };
+    const { _id: billID, name, paid, attachment, notes, payedAmount: initialPayedAmount, barcodeImage: initialBarcodeImage } = bill ?? { _id:undefined, name:"", paid:false, notes:"" };
 
     const { yearMonth:{year: billYear, month: billMonth}, _id: locationID } = location;
 
     const initialState = { message: null, errors: {} };
+    
     const handleAction = updateOrAddBillMiddleware.bind(null, locationID, billID, billYear, billMonth);
-    const [ state, dispatch ] = useFormState(handleAction, initialState);
 
+    const [ state, dispatch ] = useFormState(handleAction, initialState);
     const [ isPaid, setIsPaid ] = React.useState<boolean>(paid);
+    const [ payedAmount, setPayedAmount ] = React.useState<number>(initialPayedAmount ?? 0);
+    const [ barcodeImage, setBarcodeImage ] = React.useState<string | undefined>(initialBarcodeImage);
 
     const billPaid_handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
         setIsPaid(event.target.checked);
     }
 
     const billAttachment_handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        findDecodePdf417(event).then(result => console.log(result));
+        findDecodePdf417(event)
+            .then(result => {
+                if(result) {
+                    const { 
+                        barcodeImage,
+                        billInfo
+                    } = result;
+
+                    setPayedAmount(billInfo.amount);
+                    setBarcodeImage(barcodeImage);
+                }
+            });
     }
 
     return(
@@ -99,7 +113,7 @@ export const BillEditForm:FC<BillEditFormProps> = ({ location, bill }) => {
                         <div className="form-control p-1">
                             <label className="cursor-pointer label p-0 flex">
                                 <span className="label-text flex-none w-[6.4em]">Amount</span> 
-                                <input type="text" id="payedAmount" name="payedAmount" className="input input-bordered text-right w-full" placeholder="0.00" defaultValue={payedAmount === null || payedAmount === undefined ? undefined : payedAmount / 100}/>
+                                <input type="text" id="payedAmount" name="payedAmount" className="input input-bordered text-right w-full" placeholder="0.00" defaultValue={payedAmount/100}/>
                             </label>
                         </div>
                         <div id="status-error" aria-live="polite" aria-atomic="true">
@@ -113,6 +127,18 @@ export const BillEditForm:FC<BillEditFormProps> = ({ location, bill }) => {
                     </>
                 }
 
+                <input type="hidden" name="barcodeImage" value={barcodeImage} />
+                {
+                    barcodeImage ?
+                    <div className="form-control w-[325px] p-1">
+                        <label className="cursor-pointer label p-0">
+                            <span>
+                                <img src={barcodeImage} style={{ maxWidth:"325px" }} />
+                            </span>
+                        </label>
+                    </div> : null
+                }
+
                 <textarea id="billNotes" name="billNotes" className="textarea textarea-bordered my-2 max-w-lg w-full block" placeholder="Note" defaultValue={notes ?? ''}></textarea>
                 <div id="status-error" aria-live="polite" aria-atomic="true">
                     {state.errors?.billNotes &&