'cannot able to send files with extact format in flutter

I'm currently working in a flutter, I'm trying to send a file to the backend server. But I can send a file but the extension is showing as BIN and the file is not supported.

 pick() async {
    var img = await ImagePicker().getImage(source: ImageSource.gallery);
    image = img;
  }

send() async {
// if (imageFile == null) {
//   return Get.snackbar("alert", 'Please select image');
// }

try {
  String? message = messageController.text;

  final url = Uri.parse('http://localhost:8000/integration-test');

  //Map<String, String> headers = {'Authorization': 'Bearer $token'};
  Uint8List data = await this.image.readAsBytes();
  List<int> list = data.cast();
  var request = http.MultipartRequest('POST', url)
    //..headers.addAll(headers)
    ..fields['sender'] = "venkat"
    ..fields['numbers'] = numbers
    ..fields['message'] = message;
  if (image != null) {
    request.files.add(http.MultipartFile.fromBytes('file', list,
        filename: 'example.jpeg'));
  }

  var response = await request.send();
  //var decoded = await response.stream.bytesToString().then(json.decode);

  if (response.statusCode == 200) {
    Get.snackbar("alert", 'SUCESS');
  } else {
    Get.snackbar("alert", 'FAILED');
  }
} catch (e) {
  Get.snackbar('alert', 'Image failed: $e');
}

}

this is how the received file is

and help to set the file name dynamically.

when i done it with ajax and jquery it works file i need the exact result like this

let formData = new FormData();
        
        let file = $('#1file')[0].files[0];
        const sender=c;
        const message = $('.i-message').val();
        const datepick=$("#i-datetimepicker").val();
        formData.append('sender',c);
        formData.append('numbers',JSON.stringify(irecepient));
        formData.append('message',message);
        
        if(file){
         formData.append('file',file);      
        }
        if(datepick){
         formData.append('date',datepick);
        }

        
        $.ajax({
            type: "POST",
            url: "http://localhost:8000/integration-test",
            //enctype: 'multipart/form-data',
            contentType:false,
            processData:false,
            data: formData,
            success: function (data) {
                if(data !=0){
                    $('.logs').append($('<li>').text("task processing"));
                        
                        
                }else{
                    $('.logs').append($('<li>').text("task failed"));
                }
            }
        });
    });

this works good and i expect the above flutter code to do this



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source