How to upload image to server in flutter

Question

How does uploading image to server works in flutter! The ImagePicker return a path to directory,what url should be sent to server and what url should be used to show image on app if I want to upload a png format with autorization token in form-data with key profile_image and to show the similar Image.Below is one of the multiple I tried..

asyncFileUpload(File file) async {
var request = http.MultipartRequest(
    "POST",
    _getUri(
      '/profilepicture',
    ));
var token = getHeaders();
request.headers["authorization"] = token as String;
;

var pic = await http.MultipartFile.fromPath("profile_image", file.path);
request.files.add(pic);
var response = await request.send();

var responseData = await response.stream.toBytes();
var responseString = String.fromCharCodes(responseData);
print(responseString);
}

Answer 1

What you are sending to the server is .png file and what is supposed to be shown to the user is the image in the server(url path) not the url path from phone. Therefore if the response returns that url all you need to do is get hold of it in the NetworkImage('url') or Image.network('url')

Note: It would be easy if you first show the picked image in your view then have a button that does the submit to the server. If successful replace the image picked url with the url from the server

asyncFileUpload(File file) async {
    try {
      var request = http.MultipartRequest(
          'POST',Uri.parse('url'));
      var token = getHeaders();
request.headers["authorization"] = token as String;
      request.headers.addAll({
        'Content-Type': 'application/json'
      });
      //request.fields.addAll({
       // 'user_id': userId,
      //});
      request.files.add(await http.MultipartFile.fromPath('profile_image',file.path));
      var response =  await request.send();

      var serverResponse = await http.Response.fromStream(response);
      final responseData = json.decode(serverResponse.body);

      if(response.statusCode == 200 || response.statusCode == 201){
        return responseData;
      }else{
        return responseData;
      }
    } catch (e) {
      print("Error occurred: $e");
      return Future.error(e);
    }
  }