0

I'm trying to send image data from my nodejs express server to flutter. I receive the image data as a buffer from another server Appwrite and decode it to base64 string then send the string which upon receiving it on my flutter app, i try to decode it and display the image but displaying fails with error message

error

Server side

const getPhoto = async function(req, res){
    var data = await api.getStorage().getFilePreview('61579ced0');
    console.log("raw data -------------------------------\n")
    console.log(data);
    var base64 = data.toString('base64');
    console.log("base 64 data -------------------------------\n")
    console.log(base64);
    
    var obj = new Object();
    obj['data'] = base64;
    res.send(obj);
};

Raw data format

below is the output of console.log(data);

raw data from the buffer

in encoded form(base 64)

below is the output of var base64 = data.toString('base64');

base64 string

Flutter side

model

@JsonSerializable()
    class ImageResponse {
    
      String data;
    
      ImageResponse(this.data);
    
      factory ImageResponse.fromJson(Map<String, dynamic> json) =>
          _$ImageResponseFromJson(json);
    
      Map<String, dynamic> toJson() => _$ImageResponseToJson(this);
    
      Uint8List getImage() {
        return base64Decode(data);
      }
    }

displaying the image

FutureBuilder<Uint8List>(
                      future: bloc.getPhoto(),
                              builder: (BuildContext context,
                                  AsyncSnapshot<Uint8List> snapshot) {
                                if (snapshot.hasData) {
                                  return Image.memory(snapshot.data);
                                } else {
                                  return FittedBox(
                                    fit: BoxFit.contain,
                                    child: Image.asset(
                                      'assets/images/placeholder.jpg',
                                    ),
                                  );
                                }
                              })
Edijae Crusar
  • 3,473
  • 3
  • 37
  • 74
  • I don't know what the "encoded form" output is supposed to be, but it's not base64. – jamesdlin Oct 05 '21 at 20:43
  • @jamesdlin it's the result of `var base64 = data.toString('base64');` – Edijae Crusar Oct 05 '21 at 20:46
  • @jamesdlin i'm encoding it to base64 string before sending. – Edijae Crusar Oct 05 '21 at 20:47
  • I know that you're *trying* to encode to base64, but what you claim is your "encoded form" output contains lots of `?` and `!` characters, which are not valid characters in the base64 alphabet. – jamesdlin Oct 05 '21 at 20:48
  • @jamesdlin i've tried to convert the raw data to buffer and then to base 64 `var buffer = Buffer.from(data,'binary'); var base64 = buffer.toString('base64');` but i get the error `invalid image data` on flutter. when i copy the base64 string to decode it to image via online tool https://base64.guru/converter/decode/image i get the error message `The MIME of file was detected as “application/octet-stream”, but the decoder displays it as “image/octet-stream”. ` – Edijae Crusar Oct 05 '21 at 21:06

0 Answers0