Recently in my Flutter web app project, i was need upload an image to the server and i had a lot of problem about it,so i finally found a way but it isn’t showing the image type in JSON response after uploading the image on the server. however, I know uploading in the Backend side is correct, and also after uploading the image, shows on the server side correct but in JSON response is not correct.
if you look to the yellow side everything is correct that was uploaded by Postman.but
if you look to the green side isn’t correct that that was uploaded by the Flutter web app.
My Flutter code
Image pick :
List<int>? _selectedFile;
Uint8List? _bytesData;
startWebFilePicker() async {
FileUploadInputElement uploadInput = FileUploadInputElement();
uploadInput.multiple = true;
uploadInput.draggable = false;
uploadInput.click();
uploadInput.onChange.listen((event) {
final files = uploadInput.files;
final file = files![0];
final reader = FileReader();
reader.onLoadEnd.listen((event) {
setState(() {
_bytesData =
Base64Decoder().convert(reader.result.toString().split(",").last);
_selectedFile = _bytesData;
print('_bytesData -> ${_bytesData}');
});
});
reader.readAsDataUrl(file);
});
}
Upload on Server :
Future uploadImage() async {
String token = await apiController.getToken();
var url = Uri.parse(conf.url);
var request = http.MultipartRequest("POST", url);
request.headers['Authorization'] = 'Bearer $token';
request.headers['Content-Type'] = 'multipart/form-data';
request.fields['name'] = 'parent cat';
request.fields['description'] = 'description cat';
request.fields['parent_id'] = '';
request.fields['is_active'] = '1';
request.files.add(await http.MultipartFile.fromBytes(
'image', _selectedFile!,
contentType: new MediaType('*', '*'), filename: "image"));
request.send().then((response) {
if (response.statusCode == 200) {
print('response.statusCode -> ${response.stream}');
print("File uploaded successfully");
} else {
print('file upload failed');
}
});
}
Log cat response for me after upload ->
File uploaded successfully
I don’t know what to do because everything is correct and I get the correct response from the server, but the photo is without an extension.
>Solution :
You need to upload image with their name along with their extensions.
For ex. image1.jpg, image2.jpg
Future uploadImage() async {
String token = await apiController.getToken();
var url = Uri.parse(conf.url);
var request = http.MultipartRequest("POST", url);
request.headers['Authorization'] = 'Bearer $token';
request.headers['Content-Type'] = 'multipart/form-data';
request.fields['name'] = 'category name';
request.fields['description'] = 'description cat';
request.fields['parent_id'] = '';
request.fields['is_active'] = '1';
request.files.add(await http.MultipartFile.fromBytes(
'image', _selectedFile!,
contentType: new MediaType('*', '*'), filename: "image.jpg"))//Add your file name here;
request.send().then((response) {
if (response.statusCode == 200) {
print('response.statusCode -> ${response.stream}');
print("File uploaded successfully");
} else {
print('file upload failed');
}
});
}