How make a http post using form data in flutter?

Question

I'm trying to do a http post request and I need to specify the body as form-data, because the server don't take the request as raw.

This is what I'm doing:

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  postTest() async {
    final uri = 'https://na57.salesforce.com/services/oauth2/token';
    var requestBody = {
      'grant_type':'password',
      'client_id':'3MVG9dZJodJWITSviqdj3EnW.LrZ81MbuGBqgIxxxdD6u7Mru2NOEs8bHFoFyNw_nVKPhlF2EzDbNYI0rphQL',
      'client_secret':'42E131F37E4E05313646E1ED1D3788D76192EBECA7486D15BDDB8408B9726B42',
      'username':'example@mail.com.us',
      'password':'ABC1234563Af88jesKxPLVirJRW8wXvj3D'
    };

    http.Response response = await http.post(
        uri,
        body: json.encode(requestBody),
    );

    print(response.body);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Container(
        child: Center(
          child: RaisedButton(
            child: Text('Press Here'),
            onPressed: (){
              postTest();
            },
          ),
        ),
      ),
    );
  }
}

This is the actual response:

{
    "error": "unsupported_grant_type",
    "error_description": "grant type not supported"
}

This is the expected response:

{
    "access_token": "00D0b000000Bb08!AR8AQO.s8mAGXCbwV77FXNLQqc2vtl8g6_16miVbgWlQMsuNHsaf2IGLUwnMVXBOfAj19iznhqhwlPOi4tagvf7FFgiJJgoi",
    "instance_url": "https://na57.salesforce.com",
    "id": "https://login.salesforce.com/id/00D0b000000Bb08EAC/0050b000005nstiAAA",
    "token_type": "Bearer",
    "issued_at": "1567993324968",
    "signature": "1+Zd/dSh9i7Moh2U0nFJLdXkVHqPlPVU6emwdYzXDPk="
}

You can test this on postman switching the body between raw (you get the actual response) and form-data (you get the expected response)

PS: The headers are temporary headers created by the client tool.

any solution for this? The above link from @MalithKuruwita doesn't have an accepted answer either — Eight Rice, May 21 '21 at 16:29
@EightRice if you want to send data to the server which accepts content-type: x-www-form-urlencoded, the above URL that I gave works. And it is for text data. But if you want to send multipart/form-data. like file or images to the server (binary data), use this ( https://www.developerlibs.com/2020/07/flutter-upload-multipart-images-server.html ). That blog shows how to send text data as well. use the relevant one based on the server accepted content-type — Malith Kuruwita, May 22 '21 at 00:43

score 33 · Accepted Answer · answered Sep 09 '19 at 02:46

33

Use Map instead, because body in http package only has 3 types: String, List or Map. Try this:

final uri = 'https://na57.salesforce.com/services/oauth2/token';
var map = new Map<String, dynamic>();
map['grant_type'] = 'password';
map['client_id'] = '3MVG9dZJodJWITSviqdj3EnW.LrZ81MbuGBqgIxxxdD6u7Mru2NOEs8bHFoFyNw_nVKPhlF2EzDbNYI0rphQL';
map['client_secret'] = '42E131F37E4E05313646E1ED1D3788D76192EBECA7486D15BDDB8408B9726B42';
map['username'] = 'example@mail.com.us';
map['password'] = 'ABC1234563Af88jesKxPLVirJRW8wXvj3D';

http.Response response = await http.post(
    uri,
    body: map,
);

answered Sep 09 '19 at 02:46

hoangquyy

1,893
2
14
29

If body is a Map, it's encoded as form fields using encoding. The content-type of the request will be set to "application/x-www-form-urlencoded". https://pub.dev/documentation/http/latest/http/Client/post.html – kaya Feb 10 '20 at 15:00
Seems using Map behaves more naturally like a post from an HTML form than the jsonEncode method used on the official flutter docs. Thanks. Fixed my issue. – Eaweb Oct 01 '20 at 13:04
1

map doesn't worked for me. I have to use Dio FormData, but I am wonder why I will get 400 error by sending a map ? – mohammad Nov 28 '20 at 13:31
1

@mohammad what did you sending? – hoangquyy Nov 30 '20 at 02:36
Bad state: Cannot set the body fields of a Request with content-type "application/json" – Akbar Pulatov Feb 18 '21 at 11:06

score 13 · Answer 2 · answered May 12 '20 at 16:04

Use MultipartRequest class

A multipart/form-data request automatically sets the Content-Type header to multipart/form-data.

This value will override any value set by the user.

refer pub.dev doc here

For example:

 Map<String, String> requestBody = <String,String>{
     'field1':value1
  };
 Map<String, String> headers= <String,String>{
     'Authorization':'Basic ${base64Encode(utf8.encode('user:password'))}'
  };

  var uri = Uri.parse('http://localhost.com');
  var request = http.MultipartRequest('POST', uri)
    ..headers.addAll(headers) //if u have headers, basic auth, token bearer... Else remove line
    ..fields.addAll(requestBody);
  var response = await request.send();
  final respStr = await response.stream.bytesToString();
  return jsonDecode(respStr);

Hope this helps

If someone's wondering like I was, you can use `await http.Response.fromStream(streamedResponse)` to get the usual response object from the streamedresponse — lordvcs, Nov 05 '20 at 12:24

score 12 · Answer 3 · answered Nov 22 '19 at 12:08

12

There is a dart package dio
it works like a charm, am using it as a standard to do http requests.
Please read the docs too on sending form data with dio package

import 'package:dio/dio.dart';    

postData(Map<String, dynamic> body)async{    
var dio = Dio();
try {
      FormData formData = new FormData.fromMap(body);
      var response = await dio.post(url, data: formData);
      return response.data;
    } catch (e) {
      print(e);
    }
}

answered Nov 22 '19 at 12:08

kishea

637
1
6
17

From where you get the url when the is no parameter in Map – Mukta Apr 18 '21 at 14:10
that's a snippet of code. Hopefully leading to the desired answer – kishea Sep 28 '21 at 11:19

score 4 · Answer 4 · answered Jul 11 '20 at 07:04

So, you wanna send the body as form-data right? maybe you can try this? for me it's work

postTest() async {
    final uri = 'https://na57.salesforce.com/services/oauth2/token';
    var requestBody = {
      'grant_type':'password',
      'client_id':'3MVG9dZJodJWITSviqdj3EnW.LrZ81MbuGBqgIxxxdD6u7Mru2NOEs8bHFoFyNw_nVKPhlF2EzDbNYI0rphQL',
      'client_secret':'42E131F37E4E05313646E1ED1D3788D76192EBECA7486D15BDDB8408B9726B42',
      'username':'example@mail.com.us',
      'password':'ABC1234563Af88jesKxPLVirJRW8wXvj3D'
    };

    http.Response response = await http.post(
        uri,
        body: requestBody,
    );

    print(response.body);
  }

Or

postTest() async {
    final uri = 'https://na57.salesforce.com/services/oauth2/token';

    http.Response response = await http.post(
        uri, body: {
      'grant_type':'password',
      'client_id':'3MVG9dZJodJWITSviqdj3EnW.LrZ81MbuGBqgIxxxdD6u7Mru2NOEs8bHFoFyNw_nVKPhlF2EzDbNYI0rphQL',
      'client_secret':'42E131F37E4E05313646E1ED1D3788D76192EBECA7486D15BDDB8408B9726B42',
      'username':'example@mail.com.us',
      'password':'ABC1234563Af88jesKxPLVirJRW8wXvj3D'
    });

    print(response.body);
  }

AngryBug · Answer 5 · 2019-11-20T11:07:52.947

Edit 1 (this worked for code login flow):

String url = "https://login.salesforce.com/services/oauth2/token";
http.post(url, body: {
  "grant_type": "authorization_code",
  "client_id": "some_client_id",
  "redirect_uri": "some_redirect_uri",
  "code": "some_code_generated_by_salesforce_login",
  "client_secret": "some_client_secret",
}).then((response) {
  //--handle response
});

give 'FormData' a try from:

import 'package:dio/dio.dart';

FormData formData = new FormData.fromMap(dataMap);

retrofitClient.getToken(formData).then((response){//--handle respnse--});

'retrofitClient' is from package retrofit: ^1.0.1+1

Invalid request body \"Instance of 'FormData'\". – evals Nov 19 '19 at 18:07 — evals, Nov 19 '19 at 18:07

secret · Answer 6 · 2019-09-08T23:05:23.403

2

Can you try this;

    String url = 'https://myendpoint.com';
      Map<String, String> headers = {
"Content-Type": "application/x-www-form-urlencoded"    
"Content-type": "application/json"};
      String json = '{"grant_type":"password",
        "username":"myuser@mail.com",
        "password":"123456"}';
      // make POST request
      Response response = await post(url, headers: headers, body: json);
      // check the status code for the result
      int statusCode = response.statusCode;
      // this API passes back the id of the new item added to the body
      String body = response.body;

edited Sep 08 '19 at 23:05

answered Sep 08 '19 at 22:43

secret

742
1
7
24

1

Use or not the header don't make difference, my point is how do I send the body as form-data – M. Massula Sep 08 '19 at 22:59
I've updated my question too, now you are able to test something closer to my real situation. – M. Massula Sep 09 '19 at 01:47
@M.Massula i think in flutter, there is no any option to request using form data. it's possible only, you can pass data using json. – Hitesh Tarbundiya Nov 08 '19 at 10:12
this is missing a comma between the header strings. – markhorrocks Dec 01 '19 at 05:28

score 2 · Answer 7 · answered Mar 13 '22 at 11:56

This is my example with form data function

 Future<ResponseModel> postWithFormData(String url, List<File> files,
      {Map<String, String> body = const {}, bool throwAlert = false}) async {
    var request = http.MultipartRequest("POST", Uri.parse(localApiHost + url));

    request.headers
        .addAll({"Authorization": "Bearer ${Storage.getString(token)}"});
    request.fields.addAll(body);
    for (var file in files) {
      request.files.add(await http.MultipartFile.fromPath("files", file.path));
    }
    var sendRequest = await request.send();
    var response = await http.Response.fromStream(sendRequest);
    final responseData = json.decode(response.body);
    if (response.statusCode >= 400 && throwAlert) {
      showErrorDialog(responseData["message"]);
    }
    return ResponseModel(body: responseData, statusCode: response.statusCode);
  }

score 1 · Answer 8 · answered Jan 15 '21 at 15:41

1

HTTP does not support form-data yet!

Use DIO instead. It will handle everything on its own!

answered Jan 15 '21 at 15:41

M.AQIB

359
5
11

sorry but you are wrong. http does support form data – Akif Kara Mar 13 '22 at 09:47

score 1 · Answer 9 · answered Sep 04 '21 at 13:33

This code snippets successfully executes a POST api call which expect an authorization token and form-data.

final headers = {'Authorization': 'Bearer $authToken'};
  var requestBody = {
    'shopId': '5',
    'fromDate': '01/01/2021',
    'toDate': '01/10/2022',
  };

  final response = await http.post(
    Uri.parse(
        'https://api.sample.com/mobile/dashboard/getdetails'),
    headers: headers,
    body: requestBody,
  );

  print("RESPONSE ${response.body}");

score 0 · Answer 10 · answered Apr 12 '20 at 08:24

Using POSTMAN to test the query and get the format is quite useful. This is allow you to see if you really need to set Headers. See my example below. I hope it helps and it is not too much

import 'dart:convert';
import 'package:http/http.dart';

class RegisterUser{    
  String fullname;
  String phonenumber;
  String emailaddress;
  String password;
  Map data;    
  RegisterUser({this.fullname, this.phonenumber, this.emailaddress, this.password});    
  Future<void> registeruseraction() async {    
    String url = 'https://api.url.com/';
    Response response = await post(url, body: {
      'fullname' : fullname,
      'phonenumber' : phonenumber,
      'emailaddress' : emailaddress,
      'password' : password
    });    
    print(response.body);
    data = jsonDecode(response.body);    
  }    
}

score 0 · Answer 11 · answered Dec 01 '21 at 12:17

You can also use MultiPartRequest, it will work for sure

  var request = new 
  http.MultipartRequest("POST",Uri.parse("$baseUrl/example/"));

  request.headers.addAll(baseHeader);
  request.fields['id'] = params.id.toString();
  request.fields['regionId'] = params.regionId.toString();
  request.fields['districtId'] = params.districtId.toString(); 
  http.Response response = await http.Response.fromStream(await 
  request.send());

  print('Uploaded! ${response.body} ++ ${response.statusCode}');

score 0 · Answer 12 · answered Jan 10 '23 at 11:38

import 'package:http/http.dart' as http;

// Function to make the POST request
Future<http.Response> post(String url, Map<String, String> body) async {
  // Encode the body of the request as JSON
  var encodedBody = json.encode(body);

  // Make the POST request
  var response = await http.post(url,
      headers: {"Content-Type": "application/json"}, body: encodedBody);

  // Return the response
  return response;
}

How make a http post using form data in flutter?

12 Answers12

Linked