Roboflow API 400 Malformed Base64 Input Image Error in App Inventor

[dijitalakil]

Hello everyone, I am developing an app for visually impaired people using MIT App Inventor. I am trying to send an image from the device camera to my Roboflow model using the KIO4_Base64 extension.

My steps:

Take a picture.

Replace file:// with empty text in the generated file path.

Convert the image to string using KIO4_Base64.FileToString.

In the GotString event, I use multiple replace all text blocks to clean the base64 string by removing \n and \r.

I use the Web component to send a PostText. My request header is Content-Type: application/x-www-form-urlencoded.

I apply the UriEncode block to the cleaned base64 string right before posting.

Despite this, I constantly receive this error from Roboflow: 400 Could not load input image. Cause: Malformed base64 input image.

Has anyone successfully sent a base64 image to Roboflow using MIT App Inventor recently? What is the correct way to construct the POST payload and headers? Any help is greatly appreciated!I've attached a screenshot of the string generated by Base641, and I've printed the camera's file path to the label. Finally, the code I wrote is also attached. I would be grateful for your help.

[TIMAI2]

Try with a simple image that generates a much smaller base64

iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABHNCSVQICAgIfAhkiAAAAQFJREFUeJzt0TENACAAwDBALv5/uFHAjlbBks2zxxlkrN8BvAyJMSTGkBhDYgyJMSTGkBhDYgyJMSTGkBhDYgyJMSTGkBhDYgyJMSTGkBhDYgyJMSTGkBhDYgyJMSTGkBhDYgyJMSTGkBhDYgyJMSTGkBhDYgyJMSTGkBhDYgyJMSTGkBhDYgyJMSTGkBhDYgyJMSTGkBhDYgyJMSTGkBhDYgyJMSTGkBhDYgyJMSTGkBhDYgyJMSTGkBhDYgyJMSTGkBhDYgyJMSTGkBhDYgyJMSTGkBhDYgyJMSTGkBhDYgyJMSTGkBhDYgyJMSTGkBhDYgyJMSTGkBhDYgyJMSTmAssvAzAI7NygAAAAAElFTkSuQmCC

Does that work ?

Is the Roboflow expecting just base64 or a datauri ?

You might also want to try a base64 extension that doesn't add any \n or \r to the base64:

https://ai2.metricrat.co.uk/extensions.html#19

(Note: best to not try to set a camera image's base64 to a label, it might crash the app)

[davidefa]

Where is the documentation of the api you are using?

[TIMAI2]

I did a search on Brave:

The Roboflow API 400 error typically indicates a malformed base64 input image or an improperly formatted request body. This is a common issue when sending image data via REST endpoints, often caused by incorrect encoding methods or including unnecessary data prefixes.

To resolve this, ensure you are:

• Using the correct HTTP method : The Infer API requires a POST request, not GET.
• Formatting the JSON payload correctly : For base64 images, the body should be a JSON object with the structure {"image": {"type": "base64", "value": "<base64_string>"}} .
• Avoiding data prefixes : Do not include data URI prefixes (e.g., data:image/jpeg;base64, ) in the base64 string; send only the raw base64 characters.
• Verifying the API Key : Ensure the api_key is correctly passed in the query parameters or JSON body, depending on the specific endpoint version.
• Checking Image Encoding : Use libraries like cv2.imencode in Python or equivalent in other languages to ensure the image is correctly converted to a base64 string before sending.

[davidefa]

It seems working with these parameters:

• used this pre-trained model ( remote, pen, sanitizer, vape ): https://universe.roboflow.com/remote-v13xi/testing-6mdhc
• method POST
• url: https://serverless.roboflow.com/testing-6mdhc/1?api_key=YOURAPIKEY
• headers: Content-Type application/x-www-form-urlencoded
• body: image base64 encoded ( without any prefix )

roboflow01.aia (158.0 KB)