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) {