Cannot upload image chosen from gallery on Flutter: "Cannot extract a file path from a blob" - flutter

Question

I have this image uploading API:
http://localhost:1234/simpleApi/image/upload
Given an image file test_image.jpg, here's how you upload it via HTTPie:
http POST http://localhost:1234/simpleApi/image/upload file#test_image.jpg
If uploaded succesfully, an UUID will be returned.
Now I'm trying to do the same thing on Flutter, first pick the image from gallery, then call the image upload API:
pickImage() async {
XFile? result;
try {
result = await ImagePicker().pickImage(
source: ImageSource.gallery,
imageQuality: 70,
maxWidth: 1024,
);
} on PlatformException {
Get.snackbar('', 'Cannot access gallery...');
}
if (result != null) {
setState(() {
_imgPath = result!.path;
});
}
}
uploadImage(String pathToFile) async {
var IMAGE_UPLOAD_URL = 'http://localhost:1234/simpleApi/image/upload'
var postUri = Uri.parse("IMAGE_UPLOAD_URL");
var request = new http.MultipartRequest("POST", postUri);
request.files.add(new http.MultipartFile.fromBytes('file', await File.fromUri(Uri.parse(pathToFile)).readAsBytes(),
contentType: new MediaType('image', 'jpeg')));
request.send().then((response) {
if (response.statusCode == 200) print("Upload OK");
else ("Upload failed.");
});
}
After calling pickImage, it returns a value like this:
blob:http://localhost:64692/a4b07098-0e83-46e2-8bdd-7a0a93aedec3
Passing that value to uploadImage gives this error:
Error: Unsupported operation: Cannot extract a file path from a blob
URI
How to fix this? I tested this on Flutter 2.2.3

Answer 1

You have everything right, the only thing you have to take note of is which platform are you reading this image from, when you check the example on Pub.dev you will notice that you have to check using kIsweb, that way the system will read your blob as a network image.
Obx(() => controller.filepath.value == ""
? Text(
"Select image",
style: TextStyle(fontSize: 20),
)
: Semantics(
label:
'image_picker_example_picked_image',
**child: kIsWeb
? Image.network(
controller.filepath.value)
: Image.file(
File(controller.filepath.value)),
)**

Answer 2

instead of URI you can use this
http.MultipartFile.fromBytes(
'image',
uint8list,
filename: imageName,
);