Sending base64 image from flutter - flutter

Question

I'm facing a strange issue lately. I have to send a base64 encoded image from flutter to a remote API. The problem is that I convert the image using below code:
Future getProfileImage() async {
final _pickedFile =
await _imagePicker.getImage(source: ImageSource.gallery);
_profileImage = await File(_pickedFile!.path);
print("${_pickedFile.toString()}");
//print("${_pickedFile.path}");
List<int> _profileImageBytes = await _profileImage!.readAsBytesSync();
_profileImageBase64 = await base64Encode(_profileImageBytes);
print("$_profileImageBase64");
}
But when I try to send using following code:
Future updateProfile() async {
print("$_profileImageBase64");
String pre = "data:image/jpg;base64,";
String imageString = '';
print("$imageString");
if (_profileImageBase64 == null) {
imageString = '';
} else {
imageString = "$pre$_profileImageBase64";
}
String apiUrl = "http://162.0.236.163:3000/api/users/profile-update";
Map<String, String> header = {
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': "Bearer ${widget.user.token}"
};
print(
"Bearer ${widget.user.token}, ${_firstName!.controller!.text}, ${_lastName!.controller!.text}");
//print("$imageString");
//log(imageString);
Map<String, String> body = {
'firstName': _firstName!.controller!.text,
'lastName': _lastName!.controller!.text,
'image': imageString
};
print("${body["image"]}");
http.Response reponse =
await http.post(Uri.parse(apiUrl), body: body, headers: header);
//print("${jsonDecode(reponse.body)}");
var data = jsonDecode(reponse.body) as Map;
print("$data");
if (data["status"] == 1) {
widget.user.first = _firstName!.controller!.text;
widget.user.last = _lastName!.controller!.text;
SharedPreferences prefs = await SharedPreferences.getInstance();
prefs.setString('firstName', widget.user.first.toString());
prefs.setString('lastName', widget.user.last.toString());
}
setState(() {});
}
it fails. Strange thing is that when I print the string at the start of above method, it shows different value, but when I print body["image"] it is slightly different string. Moreover, what is surprising is that when I copy any of these Strings from console, and hardcode them for image String, the code is successful. I can't figure out why I cannot successfully send the image using a String variable, which effectively has same code. Can anyone help please?
Edit: I have just realized that the string may not be printed in console completely. When I check the length of the String it is almost 314000 characters for base64 (220kb file). But in console few thousands appear. The one from console can be successfully
sent, but full string fails. Can this be due to limitation on server end

Answer 1

Well, if there isn't a problem with authorization, and shorter strings are successfully saved, then it sounds like some form of data validation is performed on the server-side (API) that is limiting either that field or the entire message body.
If the data is being stored in a database, make sure the image field is large enough to hold that many characters.
One suggestion to try is to reduce the size of the image before you convert it to base64. There are a few optional arguments on the getImage method in the 'image_picker' package that allows you to specify a maxHeight (width would be proportional) and image quality.
import 'dart:async';
import 'dart:io' as Io;
import 'dart:convert';
import 'package:image_picker/image_picker.dart';
final pickedFile = await picker.getImage(
source: ImageSource.gallery,
maxHeight: 150,
imageQuality: 90,
);
final bytes = await pickedFile.readAsBytes();
final b64img = base64.encode(bytes);