2

I am trying to upload image using Flutter's http plugin.

Following is my code

Future<ImageUploadModel> postImage(File photoPath) async {
    ImageUploadModel imageUploadModel;

    var request = http.MultipartRequest(
        "POST", Uri.parse("my_api_url"));

    request.files.add(http.MultipartFile.fromBytes(
        "photo", await File.fromUri(Uri.parse(photoPath.path)).readAsBytes(),
        contentType: MediaType('image', 'jpg')));

    final response = await request.send();

    Uint8List responseByteArray = await response.stream.toBytes();

return standardSerializers.deserializeWith(ImageUploadModel.serializer, json.decode(utf8.decode(responseByteArray)));
  }

I tried uploading image using Postman and the image get uploaded properly.

I have followed the links on stack but I am not able to resolve the error

Flutter: http post upload an image Flutter how to send multiple files to http post How to send an image to an api in dart/flutter? How to upload image in Flutter?

I am getting a status code of 200 but when I tried to access any variable from the response I get empty string.

I tried with Native Android using Kotlin and Retrofit and it works properly

I also tried the Dio library

Dio dio = Dio();
    FormData formdata = FormData();

    formdata.add("photo", UploadFileInfo(photoPath, basename(photoPath.path)));
    dio
        .post("My_API_URL",
            data: formdata,
            options: Options(
                method: 'POST',
                responseType: ResponseType.json // or ResponseType.JSON
                ))
        .then((response) {
      print("2 $response");
      return standardSerializers.deserializeWith(
          ImageUploadModel.serializer, json.decode(response.data));
    }).catchError((error) => print("3 $error"));

I don't want to convert my image to base64

Improve this question

2 Answers 2

Reset to default
3

I finally figured it out. Following code works for me.

var request = http.MultipartRequest(
        "POST", Uri.parse("MY_API_URL"));
    var multipartFile = await http.MultipartFile.fromPath(
        "photo", photoPath.path,
        contentType: MediaType('image', 'jpeg'));
    request.files.add(multipartFile);
    http.StreamedResponse response = await request.send();
    var responseByteArray = await response.stream.toBytes();

    return ImageUploadModel.fromJson(
        json.decode(utf8.decode(responseByteArray)));

Just change the MediaType according to your requirements

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0
+50

The response is a stream and therefore asynchronous. You are returning imageUploadModel before it gets a value assigned to it. Try the code below:

Uint8List responseByteArray = await response.stream.toBytes();

return standardSerializers.deserializeWith(ImageUploadModel.serializer, json.decode(utf8.decode(responseByteArray)));
Improve this answer

7 Comments

I am getting empty response from server. I am pretty sure there is no error in the API as I checked it with postman.
Then there is a problem with your server endpoint as well - it should not return 200 and empty response. You will not be able to accurately determine what the issue is in your Flutter code until your server becomes consistent with responses.
I had a talk with my backend engineer and he said the image is not reaching the server
You could also use MultipartFile.fromPath seeing as you have the file path available, which will slightly shorten your code and possibly read the file more efficiently - but I doubt that will make a change to your problem. It's still definitely wrong for your endpoint to return a 200 if the file is not even reaching it.
I had used MultipartFile.fromPath and even used the Dio library but I am facing the same issue
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.