Question 75194 in Flutter Question posted in
The official Flutter documentation can be found here.

Sending a list of images along with data in http post flutter

I have a list of images and data (string) that I need to send to my backend.
This is the important function:

Future MakePostPetOfferRequest(
      {required String title,
      required String description,
      required String price,
      required String city,
      required String species,
      required String sex,
      required String ageYears,
      required String ageMonths,
      required String breed,
      required List<File?> images}) async {
    Uri url = Uri.parse('http://$ip/create_sale_post');
    Map<String, dynamic> body = {
      "Title": title,
      "Description": description,
      "City": city,
      "Species": species,
      "Price": price,
      "Sex": sex,
      "Years": ageYears,
      "Months": ageMonths,
      "Breed": breed,
      "images": images,
    };

    var response = await http.post(url, headers: {"cookie": sessionCookie}, body: body);
    if (response.headers['set-cookie'] != null) {
      String initSessionCookie = response.headers['set-cookie']!;
      if (sessionCookie != "") sessionCookie = initSessionCookie.substring(0, initSessionCookie.indexOf(";"));
    }
    return response;
  }

But I am faced with different errors, the first is the error:

type ‘List<File?>’ is not a subtype of type ‘String’ in type cast

I also am not sure how I can add the images to one single field, like I do it on Post man here:
PostMan Request

I hope the question is clear and thank you for the assistance.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I have found a way to do it, and it is fairly simple, using no third party packages, only the built in http.MultipartRequest() method.

        Uri url = Uri.parse('http://$ip/create_sale_post');
    var request = http.MultipartRequest('POST', url);

    for (var i = 0; i < images.length; i++) {
      var image = await http.MultipartFile.fromPath(
        'images',
        images[i]!.path,
      );
      request.files.add(image);
    }
    request.headers['cookie'] = sessionCookie;
    request.fields["Title"] = title;
    request.fields["Description"] = description;
    request.fields["City"] = city;
    request.fields["Species"] = species;
    request.fields["Price"] = price;
    request.fields["Sex"] = sex;
    request.fields["Years"] = ageYears;
    request.fields["Months"] = ageMonths;
    request.fields["Breed"] = breed;
    request.headers['Content-Type'] = 'multipart/form-data';

    var response = await request.send();

  2. 0

    To post image you should use a formdata.

    import 'package:dio/dio.dart' as formDataMap;

formDataMap.FormData formData = formDataMap.fromMap({
        "Title": title,
      "Description": description,
      "City": city,
      "Species": species,
      "Price": price,
      "Sex": sex,
      "Years": ageYears,
      "Months": ageMonths,
      "Breed": breed
      });
      for (var file in images) {
        formData.files.addAll([
          MapEntry("images[]",
              await formDataMap.MultipartFile.fromFile(file.path)),
        ]);
      }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search