Field "field" required when sending FormData with MultipartFile GetConnect

Question

I am trying to make a put request to update a user profile with GetConnect. The user profile takes some normal JSON fields and a MultipartFile for the profile picture.

Here's my ProfileProvider class:

class ProfileProvider extends GetConnect {
 Future<ProfileModel> updateProfile({
  String name,
  String email,
  String address,
  File avatar,
 }) async {

 final headers = {
  "Authorization": "Bearer $token",
  "Content-Type": "application/json",
  "Accept": "application/json",
};

String fileName = avatar.path.split("/").last;
final form = FormData({
  "name": name,
  "email": email,
  "address": address,
  "avatar": MultipartFile(avatar, filename: fileName),
});

final response = await put(url, form, headers: headers);

if (response.statusCode == 200) {
  final profileModel = ProfileModel.fromJson(response.bodyString);

  return profileModel;
   }
  }
 }

As you can see I am using FormData to send the encoded object to the API. But the response says the field name, email, address is required but I am already sending them with the form. What I am doing wrong here? The GetConnect documentation has a similar file upload doc but without additional fields (ie. name, email, address). Also if I omit the MultiartFile from the FormData, it's working.

Faddish

did you found any workaround for this? I'm having the same issue right now – Kong

Answer 1

DON'T USE Content-Type fixed in your headers; I resolve this removing the Content-Type of the headers, the get make this for you.

My example:

import 'package:path/path.dart' as path;
import 'package:get/get_connect/http/src/multipart/form_data.dart' as fd;
import 'package:get/get_connect/http/src/multipart/multipart_file.dart' as mf;
...
      final formData = fd.FormData({
        'type': type,
        'file1': mf.MultipartFile(pathImgFront,
            filename: path.basename(pathImgFront),
            contentType: 'multipart/form-data'),
        'file2': pathImgVerse == null
            ? null
            : await mf.MultipartFile(pathImgVerse,
                filename: path.basename(pathImgVerse),
                contentType: 'multipart/form-data')
      });

      response = await apiRequest.httpClient.post(
        'https://your.url/api',
        body: formData,
        contentType: 'multipart/form-data',
      );

In my class that extends WebRequest that extends GetConnect, and i have the request modifier that add my headers

const baseUrl = 'https://yourbaseurl.com'
class APIRequest extends WebRequest implements GetxService {
  Future<APIRequest> init() async {
    httpClient.baseUrl = baseUrlr;

    httpClient.addAuthenticator((Request request) async {
      request.headers.addAll(HeadersAPI(token: _fetchToken()).getHeaders());

      return request;
    });

And in this headers not use Content-Type.

WebRequest

class WebRequest extends GetConnect implements GetxService {
  Future<WebRequest> init() async {
    httpClient.addRequestModifier((Request request) async {
    
      return request;
    });

    httpClient.addResponseModifier((request, response) async {
      print({
        'event': event,
        'method': request.method,
        'url': request.url.toString(),
        'status': response.statusCode
      });
    
      return response;
    });

    return this;
  }
}

Frequently

Answer 2

The issue is the type of your body. Remove the 'FormData'
Try the code below instead.

final form = {
  "name": name,
  "email": email,
  "address": address,
  "avatar": MultipartFile(avatar, filename: fileName),
};

Swindle