Image can't be uploaded to the server in flutter using DIO

Question

So I was trying to update my profile user by using a backend framework named ASP.NET core. It works fine when I try to use the API in the postman, it’s 100% working, it changes all of the userprofile from the email, image, and etc. But the thing is when I try to use the API in the flutter, it doesn’t work. When I try to debug it, I found that one of my variables which is in the model can’t catch the multipartfile from an image, and that makes an error.

What I have tried to solve this problem(but still doesn’t work):

I have changed the resolution
I have changed the width and height of the image

POSTMAN Is working

https://i.stack.imgur.com/lj1af.png

UserProfileServices.dart

Future<Response> updateProfile(
  File profilePic,
  String email,
  String password,
  String fullName,
  String phoneNumber,
  DateTime dateOfBirth,
  String gender,
  String address,
  String city,
  String province,
  String postalcode

)async{
  final _path="/user/update-user";


  try{
FormData formData= FormData.fromMap(({
   
      "Image": await MultipartFile.fromFile(profilePic.path,
            filename: profilePic.path.split("/").last),
     "Email":email,
      "Password":password,
      "FullName":fullName,
      "DateOfBirth":dateOfBirth,
      "Gender":gender,
      "Address":address,
      "City":city,
      "province":province,
      "postalcode":postalcode,

    }));
      Response response = await httpClient.put(_path,data:formData);
    return response;
  }
    catch(e)
    {
      print(e);
      return e.response;
    }
}

Debugging, the profilepic variable was successfully getting the image path, but the image can't catch that

https://i.stack.imgur.com/a5AU7.png

Assassin Assassin · Accepted Answer · 2020-11-19T05:53:51

Install and import mime and dio and http(just in case)

import 'package:dio/dio.dart';
import 'package:mime/mime.dart';
import 'package:http_parser/http_parser.dart';

Code

Future<Response> updateProfile(File profilePic,String email,String password,String fullName,String phoneNumber,DateTime dateOfBirth,String gender,String address,String city,String province,String postalcode)async{

  final _path="/user/update-user";

 try{
    Dio dio = new Dio();
   final mimeTypeData =lookupMimeType(profilePic.path, headerBytes: [0xFF, 0xD8]).split('/');
     FormData formData= FormData.fromMap(({
     "Image": await MultipartFile.fromFile(profilePic.path,contentType: MediaType(mimeTypeData[0], mimeTypeData[1]),
     "Email":email,
      "Password":password,
      "FullName":fullName,
      "DateOfBirth":dateOfBirth,
      "Gender":gender,
      "Address":address,
      "City":city,
      "province":province,
      "postalcode":postalcode,

    }));
     var response = await dio.post("enter your full url for api here",data: formData);
    return response;
  }
    catch(e)
    {
      print(e);
      return e.response;
    }
}

Note: Check formData have all values

If you don't want to use Dio you can use Multipart method without dio,you can refer the the following link

flutter-image_upload

Image can't be uploaded to the server in flutter using DIO

2 Answers