Upload PDF to Internal Budibase Table Attachment Field via Custom Component

[josh99smith]

Hello All!

I am currently attempting to build a custom component that will take a fillable PDF file, allow you to fill it out in browser and then save the resulting filled PDF into an internal Budibase table's attachment field.

I seem to have hit a wall trying to save the filled PDF to an attachment field of an internal BB table. I believe the issue may be related the JSON I am passing to the table for the attachment field.

In my SVELTE app, I am using the following JS to create the context I need for my child component. The button child component is what will actually write the data into the table, however, I keep getting an error stating that "attachments.forEach is not a function"

`<script>
import { PDFDocument } from "pdf-lib";
import download from "downloadjs";
import { getContext, setContext, onDestroy, onMount } from "svelte";

const component = getContext("component");
const { styleable, API, Provider } = getContext("sdk");
const formContext = getContext("form");
const formStepContext = getContext("form-step");

export let day;
export let month;
export let year;
export let educator;
export const yearValue = year;
export let attachment;
export let attachments;

async function fillForm() {
const formUrl =
"sample.com/848a682b-a594-4eaf-8374-064f36259c17.pdf";

const formPdfBytes = await fetch(formUrl).then((res) => res.arrayBuffer());

// Load a PDF with form fields
const pdfDoc = await PDFDocument.load(formPdfBytes);

// Get the form containing all the fields
const form = pdfDoc.getForm();

// Serialize the PDFDocument to bytes (a Uint8Array)
const pdfBytes = await pdfDoc.save();

// Trigger the browser to download the PDF document
download(pdfBytes, "pdf-lib_form_creation_example.pdf", "application/pdf");

const pdfBase64 = btoa(pdfBytes);

attachments = [
{
content_type: "application/pdf",
filename: "example.pdf",
base64: pdfBase64,
},
];
}

$: attachment = attachments;
</script>

<Provider data={{ yearValue: year, document: attachment }}>


`
My App Screen (Pressing the FILL PDF button creates the JSON needed to send to the attachment field of my internal table. Then pressing the "New Button" will actually take the JSON data and attemp to create a new row on the internal table. However, I am getting the attachments.forEach is not a function error)

My actions on my button are simply writing a new row to the table using the context from the custom component I created.

It appears my context data is making out of my custom component and into the budibase app, however I am getting a 500 error as the table is not accepting my row data. Am I sending the wrong JSON to the table to write to the attachment field?