getting error status code 500 from the jsonencode in flutter

Question

 onPressed: () async {
          final url = Uri.parse('https://anash-visual-qa.hf.space/run/predict');
          final response = await http.post(
            url,
            headers: {'Content-Type': 'application/json'},
            body: jsonEncode({
              'data': [
                'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==',
                'hello world',
              ],
            }),
          );

          if (response.statusCode == 200) {
            final data = jsonDecode(response.body)['data'];
            print(data);
            print('Request Success with status: ${response.statusCode}.');
            // Do something with data
          } else {
            print('Request failed with status: ${response.statusCode}.');
          }

          Navigator.push(
            context,
            MaterialPageRoute(
                builder: (context) => output(
                      response.body,
                    )),
          );

i am getting the correct output when the data is passed in the string format as given above inside json encode.

.................................................................................................................................................................................

onPressed: () async {
                // List<int> _bytes = await imageFile!.readAsBytes();
                Uint8List imageBytes = await imageFile!.readAsBytes();
                img.Image image = img.decodeImage(imageBytes)!;
                img.Image pngImage = img.copyResize(image, width: 800);
                Uint8List pngBytes = img.encodePng(pngImage);
                String base64String = base64Encode(pngBytes);
                // String _base64String = base64.encode(_bytes);
                String textInput = fieldText.text;
                if (imageFile != null &&
                    base64String.isNotEmpty &&
                    textInput.isNotEmpty) {
                  final url =
                      Uri.parse('https://anash-visual-qa.hf.space/run/predict');
                  final response = await http.post(
                    url,
                    headers: {'Content-Type': 'application/json'},
                    body: jsonEncode({
                      'data': [base64String, textInput],
                    }),
                  );

                  if (response.statusCode == 200) {
                    final data = jsonDecode(response.body)['data'];
                    print(data);
                    print(
                        'Request Success with status: ${response.statusCode}.');
                    // Do something with data
                  } else {
                    print(
                        'Request failed with status: ${response.statusCode}.');
                  }

                  Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => output(
                              response.body,
                            )),
                  );
                } else {
                  print(
                      'Error: Image file, base64 string, or text input is missing.');
                }

but when i try to get pass the data inputed by the user i am getting error status code 500

can anyone help to solve the issue please

Answer 1

import 'dart:convert';
import 'dart:io';
import 'package:path/path.dart' as path;

extension Base64Extension on File {
  Future<String> toBase64() async {
    final photoInBytes = await this.readAsBytes();

    return "data:image/${path.extension(this.path)
        .replaceFirst(RegExp(r'.'), "")}"
        ";base64,${base64Encode(photoInBytes)}";
  }
}

Try this extension on your image File you can get proper base64 String and your issue would solve.