How to send json object in http post multipart request in flutter

Question

I have to send a multipart http post request that contains a image ,body and header ,Please find the body format

 body: {
        "Id":Id,
        "Details": {
          "name": Name,
          "centroid": centroid,
          "attribute": {
            "boundaryOpacity": boundaryOpacity,
            "boundaryWeight": boundaryWeight,
            "boundaryColor": boundaryColor,
            "labelColor": labelColor,
          },
},}

 headers: {
        'tenantId': tenantId,
        'Content-Type': 'multipart/form-data',
        'x-access-token': token
      },

I have to send image along with this request .Please help me with this.

question from:https://stackoverflow.com/questions/65623460/how-to-send-json-object-in-http-post-multipart-request-in-flutter

Answer 1

You can't send json encoded string with multipart, you have to do it formdata way, you may need to update your backend code

final req = http.MultipartRequest('POST', url);
// Write your add files statement here
req.fields['id'] = id; // This is your id field
req.fields['details[name]'] = Name; // This is name field in details object
req.fields['details[attribute][boundaryOpacity]'] = boundaryOpacity; // This is how you write nested fields

You can follow same pattern for other fields as well, you need to implment a check for null field, assuming id can be null, write it as follows

req.fields['id'] = id != null ? id : ''; // If it is null convert it to empty string or don't include it

Alternate solution

Add a data field and convert entire payload to json string and decode at backend.