Problem with UTF-8 encoding in API calls

[sl985]

Problem with UTF-8 encoding in API calls

Expected behavior (required)

When creating international projects, I come across specific characters of the alphabet. Using an API call, I receive a response from a POST request, I expect support for UTF-8 encoding.

Current behavior (required)

At the moment I get a response from the API server (e.g. from OpenAI.com) encoded as UTF-8, unfortunately the international characters are displayed (processed) incorrectly.

For example, requests in Postman display correctly.

To Reproduce (required)

The problem probably affects all APIs.
Example: Send a simple json request to the openAI.com API (registration and many uses are free)

1. In FlutterFlow add new API Calls:

Method Type: POST
API URL: https://api.openai.com/v1/completions

Headers
Content-Type: application/json; charset=UTF-8 Authorization: Bearer YOUR SECRET KEY

Body json
{ "model": "text-davinci-002", "prompt": "Człowiek: Napisz mini opowiadanie o kocie", "temperature": 0.7, "max_tokens": 256, "top_p": 1, "frequency_penalty": 0, "presence_penalty": 0 }

2. Send response and test (Test api call)

3. The response is not displayed correctly despite UTF-8 encoding.

Context (required)

Currently, integration with external services in an international environment is not possible.

Screenshots / recordings

FlutterFlow:
https://ibb.co/2dqJCgk

PostMan:
https://ibb.co/Sv8ZQbj

Your environment

• Bug Report Code:
• Version of FlutterFlow used: 3.3.4
• Platform (e.g. Web, MacOS Desktop): MacOS
• Browser name and version: Chrome
• Operating system and version (desktop or mobile): both

[mackaby]

I experience similar issues. API calls return fine (proper character encoding) when tested in postman, but when tested in FF, swedish characters do not get properly encoded. (tested with Meilisearch)

[benjamin-carriou]

+1, i had the same comportement with Meilisearch and Stripe

[wenkaifan0720]

Hi all. Could you try the solution in this link, which is to change/add the HTTP response header? Meanwhile, I'll raise this as a feature request.

[sl985]

Hi,
Thanks for the answer :)
Adding "charset=utf-8" to the header is not possible when using third party services. (e.g. DeepL, OpenAI, etc.).

Have you changed something? Currently, international characters are displayed correctly in my running application :)

International characters are still displayed incorrectly in Test API Call. But it's not urgent :)

[wenkaifan0720]

I didn't do anything on my part actually. But glad to hear that your app is running fine now! I didn't implement this feature so I'll ask for help from our team.

[wenkaifan0720]

Hi @agreaves. I think you implemented the API test page. Any ideas for solving this issue?

[mackaby]

I'm still having problems on my side, so please continue to investigate it :)

[agreaves]

Hi @sl985 and @mackaby, thanks for the info. Could either or both of you add a Bug Report code to this issue? It's encrypted and allows me to view the project and further investigate, and I can test out the API with the proper encoding if I have your respective permissions.

[mackaby]

@agreaves not really sure what it is you want me to upload (or where to do it). I sent the project link as DM via chat for now.

[agreaves]

As it turns out, I believe the issue is that the response headers of the API calls don't always add charset=utf-8, which is necessary for the Dart http library to decode the response as UTF-8 by default. For those who control the API response, you should ensure the charset is set in the response headers.

For everyone else, we've now aded an option in "Advances Settings" to decode the response as UTF-8. This will be released on our next deployment.