uploading images server using graphql apis

Question

i want to upload my images to the sever from flutter web, which is using graphql api. i am able to show the images on the web but unable to upload images to the server.

 static Future<int> multipartApi(File file)async {
    print("image_file_path=${file.path}");
    var byteData = file.readAsBytesSync();
    var multipartFile = MultipartFile.fromBytes(
      "",
      byteData,
      filename: "${DateTime.now().second}.jpeg",
      contentType: MediaType("image", "jpeg"),
    );

here i am picking images from gallery

final picker = ImagePicker();
  List<Uint8List> images = []; // <----change this
  List<Uint8List> imageFiles = [];
  List<File> imageList = [];
  List<int> my_images = [];

   pickImage(BuildContext context) async {

    List<XFile>? files = await picker.pickMultiImage(imageQuality: 50);

    if (files != null) {
      for (var element in files) {
        imageList.add(File(element.path));
        print("imageList= ${imageList.first.path}");
        html.File filePath = html.File(element.path.codeUnits, element.path);
        print("filePath: ${filePath.toString()}");
        imageFiles.add(await element.readAsBytes());

      }}

    // for (var element in files!) {
    //   imageList.add(File(element.path));
    //
    //   imageFiles.add(await element.readAsBytes()); // <----change this
    // }

    print("image path: ${imageList}");
    print("Length of images: ${imageList.length}");
    setState(() {
      images = imageFiles;
      print("selected_images: ${images.first.toString()}");
    });
    print("list length: ${images.length}");
  }

and here i am displaying my images inside listview builder.

child: ListView.builder(
                                  itemCount: images.length,
                                  scrollDirection: Axis.horizontal,
                                  itemBuilder: (context, index) {
                                    return Row(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: [
                                        Image.memory(
                                          images[index],
                                          height: 80,
                                          width: 80,
                                        ),
                                        InkWell(
                                          onTap: () {
                                            setState(() {
                                              images.remove(images[index]);
                                            });
                                          },
                                          child: const Icon(Icons.close),
                                        ),
                                      ],
                                    );
                                  },
                                ),

tell me where i am wrong.