Poll for image processing when returning a 423

[colbyfayock]

When using transformations that require processing thus returning a 423, poll for that image on the client so it loads upon completion.

[colbyfayock]

This can potentially use the onError function available in next/future/image: https://nextjs.org/docs/api-reference/next/future/image#onerror

[michizhou]

Hi @colbyfayock, I would like to take on this issue.

[Smartmind12]

Hey @colbyfayock I too have tried my hands on this issue...so can i submit a PR for it?

[colbyfayock]

@michizhou was first to ask so they're first to give a try. @Smartmind12 if they dont end up working on it you can give it a shot

[Smartmind12]

@michizhou was first to ask so they're first to give a try. @Smartmind12 if they dont end up working on it you can give it a shot

Okay thanks!
Requesting you to kindly open up some new issues to work on in the meantime😊

[colbyfayock]

@Smartmind12 thanks for your interest, I'll try to add some more, in the meantime feel free to open any you think could be valuable, especially in terms of bringing new Cloudinary features into the library

[michizhou]

@colbyfayock Could you point out which files I should modify for this issue? I have a rough idea on how to resolve this issue but I'm not certain where a 423 error code would be returned when using transformations that need processing.

[colbyfayock]

I have two thought processes around this

my original intent was to use a ref on the Image inside of here:

https://github.com/colbyfayock/next-cloudinary/blob/main/next-cloudinary/src/components/CldImage/CldImage.js#L60

where we could set an onerror handler: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#image_loading_errors

such as what I'm doing here:

https://github.com/colbyfayock/cloudycam/blob/4293c0551ebc64b97f221a13cccf6c4024e15442/src/components/Camera/Camera.js#L38

but instead of onload like in that example, use onerror

howver, Next.js is releasing a new onError prop https://nextjs.org/docs/api-reference/next/future/image#onerror

So it might make the most sense to develop this for the new Image component which will be launched I believe at Next.js Conf at the end of this month

Here's a PR i made that updates the component to use Future Image: #3

as far as polling goes I haven't tested to see if they return an error object with that information, so what we could potentially do is when an error occurs, make a simple fetch to the image URL, check THAT response, and if that's a 423, continue polling until it's available

what do you think?

[michizhou]

I would think the second approach probably makes more sense in terms of being up to date with the upcoming release. Just to confirm, the new onError prop and new Image component are available in Future Image right? If not, we can go with your original intent.

[colbyfayock]

yup they're available in Future Image

that PR has all the changes I needed to make

if you're familiar with how to do it, you can create a new branch from the Future branch and target that so that we can merge your PR into the Future PR, then once Future is released, I'll update the import and merge it all in

i would think it would still count for hacktoberfest for you given it's a merged PR, if not we can figure something out to get you credit

would that work?

[michizhou]

Yeah that sounds good! I'll create a PR on top of yours and we can go from there.