Hey guys! I'm trying to use a collection hook to take a SVG file and get the "inline SVG" and the base64 values.
I currently have 2 problems:
1, The hook is not running when I create the document , only on updates
2, When I'm updating the document, the hook runs and fills the form all right. But the values are not being stored in the DB: after a refresh, the fields are empty again
Here's my hook code. (I'm using next-payload)
What am I doing wrong here?
import { CollectionAfterChangeHook } from "payload/types";
const afterChangeVectors: CollectionAfterChangeHook = async ({ doc, req }) => {
const svgContent = req.files?.file.data.toString();
return {
...doc,
inline: svgContent,
base64: Buffer.from(svgContent).toString("base64"),
};
};
export default afterChangeVectors;
Hey @arielarial - How are you bringing in svgContent, is that an import?
OH I see, it's a buffer from the req
I think?
hi @notchr yes, that's it!
@arielarial I can look more into the SVG issue, but perhaps the afterChange hook is the issue
I'm not sure exactly what the hook would be for on create but
hooks: {
beforeOperation: [
({args, operation}) => {
if (operation === 'create') {
}
}]
}
I want to say that could work, but im not sure
Want to try the beforeOperation and check the "create" type for operation
maybe just log first to see if it gets picked up
let me try that
cool cool
about the SVG, that part is ok! Maybe it's not the best way to achieve it, but I'm still testing if I will need base64 or inline SVG, so for now its working 🙂
Right on! I'd probably do the xml string instead of b64, but whatever works!
Also, if the beforeOperation method works with create, then it's just a matter of how to set the data on the document to be created
Which I do not know how to do, but may have more info on the beforeOperation docs
yeah, beforeOperation is running on create. But I don't think there's a way to return data to the document. What bugs me is that the documentation for "afterChange" states that it will run on create and change
Hmm
And it's not?
Even with a console.log test?
My first guess, without knowing better, is that the hook expects the doc to be returned
you spread the doc on a new object, possible issue?
OH
@arielarial I think you want
https://payloadcms.com/docs/hooks/collections#beforevalidate
Runs before the create and update operations. This hook allows you to add or format data before the incoming data is validated server-side.
hmmmmm
import { CollectionBeforeOperationHook } from 'payload/types';
const beforeValidateHook: CollectionBeforeValidateHook = async ({
data, // incoming data to update or create with
req, // full express request
operation, // name of the operation ie. 'create', 'update'
originalDoc, // original document
}) => {
return data; // Return data to either create or update a document with
}
So modify data
still doesn't explain why afterChange didn't fire
which im curious about
@jarrod_not_jared Is that normal?
no, wait! 😅 afterChange is firing
LOL
Also on a side note
I guess my 2 problems are the same: the one about the forms not being populated in frontend / not saved in db
Isn't it weird the beforeValidate example imports beforeOperation but never uses it? @jarrod_not_jared
I think that may be a typo
for some reason, on create the hook is running, but it does not update the form
Maybe because it happens after?
The beforeValidate seemed promising
maybe that's it. I'm trying beforeChange, instead of afterChange (dont want to skip validation 😅 )
YAS
beforeChange
worked 🎉
thanks a lot, @notchr !
WOOT
Star
Discord
online
Get help straight from the Payload team with an Enterprise License.