How to send a List of images as bytes from multipart post method in flutter web

Question

I have a List of images as bytes and I would like to send it as a post request in flutter web.

Firstly how do I send the data in file format just like image picker for android/iOS in flutter web

Secondly if I had to send the attachments in the below code what changes would I need to make in multipart in flutter web

If anyone can please help me resolve this.

Let me know if you require any further information from my end

dataInsert.dart

File _file = File("zz");
Uint8List webImage = Uint8List(10);


else if (kIsWeb) {
      final imagefile =
          await picker.pickImage(source: ImageSource.gallery, maxWidth: 600);
      
      if (imagefile != null) {
        var f = await imagefile.readAsBytes();

        setState(() {
          _file = File("a");
          webImage = f;
          
          _storedImageWeb.add(webImage);
         
        });
      }
    }

Below is the value of webImage on running the above code :

[255, 216, 255, 224, 0, 16, 74, 70, 73, 70, 0, 1, 1, 0, 0, 1, 0, 1, 0, 0, 255, 226, 2, 40, 73, 67, 67, 95, 80, 82, 79, 70, 73, 76, 69, 0, 1, 1, 0, 0, 2, 24, 0, 0, 0, 0, 4, 48, 0, 0, 109, 110, 116, 114, 82, 71, 66, 32, 88, 89, 90, 32, 0, 0, 0, 0, 0, 0, 0, 0]

Multipart.dart

Future<void> addUser(
      ProjectDetail stnotification, List<Uint8List> imagecheckb) async {
      
    Map<String, String> headers = {
      "Content-Type": "charset=utf-8",
      "Content-type": "application/json"
    };

    var uri = Uri.parse('http://localhost:4000/check/upload');
    try {
      var request = http.MultipartRequest('POST', uri);
      request.headers.addAll(headers);

for (int i = 0; i <= imagecheckb.length - 1; i++) {
        http.MultipartFile multipartFile = await http.MultipartFile.fromBytes(
            'attachments', imagecheckb[i].cast());
        request.files.add(multipartFile);
      }

score 0 · Answer 1 · answered Jun 19 '22 at 11:10

0

This is a way to send a list of files/images from multipart.

 await Future.forEach(
    files,
    (file) async => {
      request.files.add(
        http.MultipartFile(
          'files',
          (http.ByteStream(file.openRead())).cast(),
          await file.length(),
          filename: basename(file.path),
        ),
      )
    },
  );

answered Jun 19 '22 at 11:10

harsuu

36
3

hi thanks for your response can you please explain the above code bcouz I am still getting a lot of error while implementing – akm Jun 20 '22 at 07:22
As mentioned in the above code getting the data in this List imagecheckb,hence it would help if you could explain with respect to above code – akm Jun 20 '22 at 07:23
Additionally also getting this error : The method 'openRead' isn't defined for the type 'Uint8List'. – akm Jun 20 '22 at 07:38

score 0 · Answer 2 · answered Aug 17 '23 at 12:00

You can handle the list of image by index:

Future addProduct(String name, String description, List<File> images) async{
    final request = await http.MultipartRequest(
        'POST',
        Uri.parse('$baseUrl/products/add-product'),
    );

    request.headers.addAll(header);

    request.fields['Name'] = name;
    request.fields['Description'] = description;

    for(int i = 0; i < images.length; i++){
      final f = await http.MultipartFile.fromPath('Photos[$i]',images[i].path);
      request.files.add(f);
    }

    final responseStream = await request.send();
    final response = await http.Response.fromStream(responseStream);

    if(response.statusCode == 200) {
      print("success")
    } else {
      print('failed')
    }       
 });

How to send a List of images as bytes from multipart post method in flutter web

2 Answers2