File uploading though scripts in pb_hooks folder

[alwaysq]

I have been struggling with the codes below for a couple of days. I don't know what I am doing wrong. I referred to the links below to come up with the codes. It has no problem creating records for the 'transDesc' and 'transAmount' fields, but it does not upload files to the 'picture' field through JavaScripts in the pb_hooks folder.

1. how to save an image to the database using pocketbase hooks files? ·
   how to save an image to the database using pocketbase hooks files? #3653

2. file uploads using pocketbase as a framework
   file uploads using pocketbase as a framework #2489 (reply in thread)

3. Extend with JavaScript - Record operations
   https://pocketbase.io/docs/js-records/#create-new-record-without-data-validations

It has no problem creating records for 'transDesc' and 'transAmount', but it does not upload files using pb_hooks. If I use the following code directly inside submitForm(), it uploads files:
const record = await this.client .collection("accTrans") .create(formData);

I am learning javascript and how to use Pocketbase. Can anyone give me advice? By they way, thank you so much for this great application!!!

`
async submitForm() {
try {
const formData = new FormData();
formData.append("transDesc", this.formData.name);
formData.append("transAmount", this.formData.amount);
for (const picture of newPicture) {
formData.append("picture", picture);
}
console.log(newPicture);
const response = await fetch("/accTrans", {
method: "POST",
body: formData,
});
if (!response.ok) {
throw new Error("Network response was not ok");
}
console.log("Form submitted successfully");
// Fetch records again to update the list
await this.fetchRecords();
} catch (error) {
console.error("Error updating open status:", error);
} finally {
this.formData.name = "";
this.formData.amount = "";
this.formData.newPicture = [];
}
},

`

=============================

`
routerAdd("POST", "/accTrans", async (c) => {
const collection = $app.dao().findCollectionByNameOrId("accTrans");
const record = new Record(collection);
const form = new RecordUpsertForm($app, record);
form.loadRequest(c.request(), "");
const { transDesc, transAmount, picture } = $apis.requestInfo(c).data;
form.loadData({
transDesc: transDesc,
transAmount: transAmount,
});

// manually upload file(s)

// const f2 = $filesystem.fileFromPath("picture");
// form.addFiles("picture", f2);

// multipart uploaded files
const [multipartFile, multipartHeader] = c.request().formFile("");
form.addFiles("picture", $filesystem.fileFromMultipart(multipartHeader));

try {
form.submit();
} catch (err) {
throw new BadRequestError("Failed to create record", err);
}
return c.json(200, { success: true });
});

`

[ganigeorgiev]

I'm having difficulties understanding the above code and what actually it is its purpose or its desired behavior (c.request().formFile("") doesn't make sense; also there is no need for async in the hook handler).

Note that you don't need to manually call form.loadData and form.addFiles if you use form.loadRequest. form.loadRequest takes care for loading all request fields (both regular data and files) into the form and its related record (as long as the submitted request field names match with the collection schema). Or in other words, your route could be simply:

routerAdd("POST", "/accTrans", (c) => {
    const collection = $app.dao().findCollectionByNameOrId("accTrans");
    const record = new Record(collection);
    const form = new RecordUpsertForm($app, record);
    
    form.loadRequest(c.request(), "");

    try {
        form.submit();
    } catch (err) {
        throw new BadRequestError("Failed to create record", err);
    }

    return c.json(200, { success: true });
});

In any case, keep in mind that the RecordUpsertForm will be removed in the next release as part of #4355.

[alwaysq]

form.loadRequest takes care for loading all request fields (both regular data and files).

<== Thank you for this explanation; it helped me understand what was wrong. I am always impressed with your concise and prompt replies to people here. Thank you so much for this amazing application as well :)