#[SOLVED] Sending a base64 encoded image (as string) to an appwrite function, using the js web sdk

60 messages · Page 1 of 1 (latest)

dim ruin
#

Does anyone have any examples of successfully sending a base64 encoded image (as string) to an appwrite function, using the js web sdk?
I don't think there is a size limit on the function parameters, but I keep getting either JSON econoding errors (on base64 image that is tested to be ok via https://base64.guru/converter/decode/image - removed the data:/;base64, from the result first ) or just a mysterious function error response console message "An internal curl error has occurred within the executor! Error Msg: Http invalid protocol\nError Code: 500"

A working example of sending a base64 encoded image (as string) to an appwrite function would be really helpful, as I can quickly compare more easily to see what might be the problem.
I've tested with shorter strings in place of the base64 encoded image, as well as truncated base64 image strings, which seem to be accpeted. The issue appears when I use a complete base64 image encoded string.

And yes, I need to send the actual image to the function for use case reasons, not upload to storage first and retrieve it from there, so that's not an option.
I keep reading in threads like this https://appwrite.io/threads/1160583345877569627 recommending that you upload the image to storage first, but this is not an option, and is a big friction point.
It is much more optimal for certain use cases to upload the image directly to the function to process, for multiple reasons.
Is this possible to do at all, or is it true that basically appwrite functions cannot handle this use case?

Thanks!

  • Appwrite support
  • Appwrite troubleshooting
  • Appwrite developer tool
  • Appwrite functions
  • Appwrite body size limit
  • Appwrite server error
  • Appwrite documentation
ember orchid
dim ruin
#

Appwrite console function error tab.

In any event, are there any working examples that demonstrate it's possible to use a base64 image string as a function paramter successfully?
I've seen a number of support threads, such as the one quoted in the OP, from people with similar requests but not definitive answer apart from "use storage", which as explained limits the use cases. Technically there shouldn't be an issue, it's just a string albeit a potentially rather large one but still a string.

I can't get it to work though, so a working example that actually demonstrates it is possible would be really welcome.

stone compass
#

why not use view/preview functions from bucket?

#

storage.getFilePreview(this.bucketId, fileId); or storage.getFileView(this.bucketId, fileId); ?

dim ruin
#

That works fine for other uses cases, not this one. Please read the OP for more insight.

dim ruin
#

I've also already implemented a prototype solution via two step storage upload then function processing of the storage file url (constructed dynamically) but it is not optimal for a number of reasons, as I imply in the OP.
Sending base64 images direct to function is supposed to be doable (within size reason, obviously there has to be some limit) and there are many use cases for processing images direct into a function.
I just don't see a working example of it, despite it being said it's possible.

dim ruin
#

@ember orchid HI. I've had some success, but it seems the base64 string size is limited in size?
I've had success with some images, but others (that are valid base64 images) fail with the following on the Function/Executions/Response/Errors tab: An internal curl error has occurred within the executor! Error Msg: Http invalid protocol\nError Code: 500

Not huge sizes either. Are there some limitations on this input?

#

Here's a successful function call. Base64 image string is processed aok:

ember orchid
dim ruin
#

So try without logging anything and see?

#

aok, sec

#

Nope. I commented out all log(xxxx) tracing and it's still getting curl errors on input base64 over a certain size

dim ruin
#

An internal curl error has occurred within the executor! Error Msg: Http invalid protocol\nError Code: 500

#

I can submit base64 images up to a certain size (~30kb original image), anything over that it gives me a curl error on the base64 image submission

#

All valid base64 image strings.

dim ruin
#

The only difference here is the files get progressively larger, though they are still pretty small, but the issue starts appearing with images over ~30kb original size, then converted to base64

#

It's working fine with images up to a point, so if it wasn't working it wouldn't work with any base64 images would it?

#

But it is, up to a point.

#

The payload to the function call on the client side is this:
payload = JSON.stringify(currentBase64File);
try {
const response = await api.executionAIFunction2(
payload
)

Function api.executionAIFunction2 call is
executionAIFunction2: (payload) => {
return api.provider().functions.createExecution(
process.env._APP_AIFUNCTION2_ID,
payload,
false,
"/",
"POST",
{
"Content-Type": "application/json",
}
);

#

then on the function side I pass the payload base64 image string to the target API call. Which, as I say, works fine with images up to a ~30kb original size, then it starts crapping out with error: An internal curl error has occurred within the executor! Error Msg: Http invalid protocol\nError Code: 500

#

I could be wrong, but the trigger here seems to be the size of the payload beyond a certain point.

#

There seems to be a 1mb limit on the request body, but we're way under that here. It's giving the error on base64 strings that are only ~59kb in size, so loads of request headroom.

ember orchid
ember orchid
dim ruin
ember orchid
#

Is your OCRService logging anything? Even with console.log?

dim ruin
#

Here is a log I just did from a successful call to the OCR Service using one of the base64 that work:

#

Yes, my bad on the console.log!

ember orchid
dim ruin
#

What do you mean stop? as in don't do it? Sure, it's temp debug only.

#

If it was the OCR service crapping out here I would be expecting a 400 error due to a malformed base64 input or other bad form input, but because it's 500 it seems to be more on the appwrite side, given the nature of the curl error on the AW console.

dim ruin
#

I'm trying to figure out where the error is here. given it works with some base64 images up to a certain size, then starts giving the curl error on AW.

#

Considering all possible causes atm, but I don't know enough about what's going on under the AW hood, so I only have control over input from client and input into the OCR API

#

But all the base64 strings look complete from client side, and from the function side when calling the API if the OCR service didn't like what it received it would send me back a 400 error on the client side.
But I'm getting a 500 error as you can see from the try block up above, with the AW console error An internal curl error has occurred within the executor! Error Msg: Http invalid protocol\nError Code: 500

#

So perhaps AW is having issues sending out the API request over a certain size? Spitballing here!

ember orchid
dim ruin
#

it doesn't matter, that's not the issue. That's been commented out all along, I just ucommented it 10 minutes ago to check the output. Commented it back out now.

ember orchid
dim ruin
#

ah, wait. I had another log

#

log("req: ");
log(req);

#

at the top of my main.js I missed and it looks like that is the culprit all along.

#

So log is limited to a certain size and gives you a curl error if over that?

ember orchid
#

Yes

dim ruin
#

doh

#

ok, you said that originally and I thought I'd caught them all. My apologies.

#

Steven — Today at 12:39
This happens when you log too much data

#

Noted!

#

Many thanks for the help.

#

It might be more user friendly to just truncate the log in that case, as well as prepend a warning the log message is over the limit and still dump it out. Or just replace the output with a message to that effect, seeing as the dev will be looking at it anyway.

#

Thanks again for the support!

ember orchid
dim ruin