chladog / payload-webp

payloadcms/payload plugin for automatic image conversion to webp format.
https://www.npmjs.com/package/payload-webp
GNU General Public License v3.0
45 stars 5 forks source link

Cannot access Buffer Objects on hooks #10

Closed jack1913 closed 1 year ago

jack1913 commented 1 year ago

Hi @chladog,

I am trying to use buffer objects, but none of the payloads hooks are returning it. :/ If I understand correctly the flow goes like this.

ACTION - Upload image via Payload. BEFORE-CHANGE, operation create - plugin-cloud-storage does its magic. AFTER-CHANGE, operation create - your plugin BEFORE(AFTER)-CHANGE, operation update - I think that's where we should be able to access buffer object, so we could perform plugin-cloud-storage operation. I know that we need to modify said plugin. But that's not the point at this moment. For now I didn't have time to analyze your code, but I think that there might be some small err that you are not appending this obj to the express response.

If you don't have enough time to address this, just point me where to look and I can create a PR with the fix.

btw. I've posted a comment in a closed issue. 🙈 My bad. here is the original link - https://github.com/chladog/payload-webp/issues/4#issuecomment-1443863296

Thanks,

chladog commented 1 year ago

You are right. You can try if sync: true config option helps together with correct ordering of the hooks. (by default webp are processed async) The problem is that it's impossible to pass req object down to payload.update method (to actually pass down any object on webp fields update which you would be able to hook to). And the hooks are being called before the payload-webp actually sets the buffer objects. Havig an option to pass req object or any custom object for that matter to subsequent local api calls could actually be nice to have feature in payload, that you could try to request the authors for. If the sync: true workaround won't work then unfortunatelly I cannot think of any workaround for now. You would probably have to fetch actual source files.

jack1913 commented 1 year ago

Already tried it. Unfortunately without success. :/ Will try to request a feature on payload cms.

If anyone would be interested I've tried to add features from your plugin into custom fork of cloud sync plugin and it worked. I've not published this repo as it is a WIP.

But to be 100% truthful this solution is not problem-free and I don't think that it could be. For now I think the best way to do this is to use Payload with the blob adapter (cloud-storage) and then use some cache library on the front to serve optimized files. For ex. In Payloads media we store only PNG/JPEG/WEBP images, we can use dedicated medias for sizing and on the front in Remix we can use remix-image with custom cache adapter (azure, Amazon etc.) and in Next we can use next-image. I think that this can bring the optimal results.

I'm leaving it just as a reference for others on what I've decided to go with. :)

chladog commented 1 year ago

Thank you, I've updated the readme that buffer objects are currently to no avail (as before when I was implementing the feature it was 100% working as I could access it in subsequent hook, maybe now the hooks are being processed in parallel due some update, IRDK). Still it felt little hacky in the first place. I'll second your feature request, as I was already missing a mechanism to pass arbitrary data through hooks in other implementations as well.

chladog commented 1 year ago

I have figured out an solution in form of custom hooks that can be defined in WebP Plugin Options, each hook is then run for each file(size). For storing files externally the afterConversion hook should be helpful ;-)