Handling of image buffer data and display of image obtained from Mongodb database in flutter

Question

I am working on a flutter project (club management application). I am using a node API for back-end side. I am able to save image with the rest of user-data to database using multipart file and in response I get image data of type buffer. But I'm not able to assign the image data to a variable in a User model class.

I have attached the following code and response data and error to give some context. This is the user model class for receiving data.

  class User {
  String name = '';
  String email = '';
  String username = '';
  List<dynamic> profilepic = <dynamic>[];
  String token = '';

  User(this.name, this.email, this.token, this.username, this.profilepic);

  User.fromJson(Map<String, dynamic> json) {
    User(
      name = json['user']['name'],
      email = json['user']['email'],
      username = json['user']['username'],
      profilepic = json['user']['profilepic']['data'],
      token = json['token'],
    );
  }
}

Following function for sending and recieving user details.

  upload(File imageFile, String username, String name, String email) async {
    var uri = "http://192.168.0.121:3000/newuser";
    String fileName = imageFile.path.split('/image_picker').last;

    FormData data = FormData.fromMap({
      'name': name,
      'email': email,
      'username': username,
      "myFile": await MultipartFile.fromFile(
        imageFile.path,
        filename: fileName,
      ),
    });

    BaseOptions options = new BaseOptions(responseType: ResponseType.plain);

    Dio dio = new Dio(options);

    dio.post(uri, data: data).then((response) {
      var jsonResponse = response.data;
      var decoded = jsonDecode(jsonResponse);
      print(decoded);
      var usersigned = User.fromJson(decoded);
      print(usersigned.name);
      print(usersigned.username);

      setState(() {});
    }).catchError((error) => print(error));
  }

Following is the response from the node server.

I/flutter (10733): {user: {name: Aniket Raj, email: [email protected], username: Aniket, profilepic: {type: Buffer, data: [255, 216, 255, 224, 0, 16, 74, 70, 73, 70, 0, 1, 1, 0, 0, 1, 0, 1, 0, 0, 255, 219, 0, 67, 0, 8, 6, 6, 7, 6, 5, 8, 7, 7, 7, 9, 9, 8, 10, 12, 20, 13, 12, 11, 11, 12, 25, 18, 19, 15, 20, 29, 26, 31, 30, 29, 26, 28, 28, 32, 36, 46, 39, 32, 34, 44, 35, 28, 28, 40, 55, 41, 44, 48, 49, 52, 52, 52, 31, 39, 57, 61, 56, 50, 60, 46, 51, 52, 50, 255, 219, 0, 67, 1, 9, 9, 9, 12, 11, 12, 24, 13, 13, 24, 50, 33, 28, 33, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 255, 194, 0, 17, 8, 3, 222, 2, 238, 3, 1, 34, 0, 2, 17, 1, 3, 17, 1, 255, 196, 0, 26, 0, 1, 0, 3, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 4, 5, 3, 6, 255, 196, 0, 25, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 3, 4, 5, 255, 218, 0, 12, 3, 1, 0, 2, 16, 3, 16, 0, 0, 2, 229, 132, 0

Following is the error recieved while saving the user photo using the user model.

I/flutter (10733): type 'List<dynamic>' is not a subtype of type 'String'

I have tried changing the photo-data type to String but to no avail. The code works without the profilepic field.

And it would be great if you could also tell me how I should render images using buffer data in flutter.

Answer 1

Think I was having the same problem as you.

Try this, think you will also need to change the type of your profile pic in your class to Uint8List.

profilepic: Uint8List.fromList((json['user']['profilepic']['data'] as List)
             ?.map((e) => e as int)
             ?.toList())