Flutter Retrofit upload file

Question

I'm working with the flutter Retrofit package, am trying to upload data to the server (Laravel). basically, the file should be sent as MultiPart part annotation. in addition, I should send with the file (in my case a picture) different values, so I used @Part() map<String, dynamic>.

this is my code

@POST('register')
  Future<RegisterResponse> register(@Body() Map<String, dynamic> body, @Part() File pic);

and this is my request

Map<String, dynamic> body = {
                            "name":" widget.fullName",
                            "username": "widget.userName",
                            "phone": "698281556",
                            "country_code": "+213",
                            "email": "widget.email@gmail.com",
                            "birth_date": "18-09-2021",
                            "pic": imageFile,
                            "lat": 36.347285,
                            "lon": 6.603381,
                            "address": "widget.userName",
                            "city": "widget.userName",
                            "residential": "widget.userName",
                            "device_token": "widget.userName",
                            "code": "123456",
                            "tags": [1,2]
                          };

                          final logger = Logger();
                          final dio = Dio(); // Provide a dio instance
                          dio.options.headers["Content-Type"] =
                          "multipart/form-data";
                          dio.options.headers["X-Requested-With"] =
                          "XMLHttpRequest";
                          final client = RestClient(dio);

                          client.register(body,imageFile!).then((it) async {

                            print(it.access_token);

                          }).catchError((Object obj) {

                            // non-200 error goes here.
                            switch (obj.runtimeType) {
                              case DioError:
                              // Here's the sample to get the failed response error code and message
                                final res = (obj as DioError).response;
                                logger.e(
                                    "Got error : ${res!.statusCode} -> ${res.data}");
                                break;
                              default:
                            }
                          });

I don't know why it doesn't work. there is not enough documentation for that. thank you for help

Answer 1

Unfortunately the documentation doesn't mention that.
You have to annotate your request using @Multipart in order to be able to upload files.

Another case you must pay attention is that when you annotate your request using @Multipart , you must annotate all of the fields using @Part . even those which are not files.

An example:

  @POST('/store')
  @MultiPart()
  Future<dynamic> store({
    @Part() required String title,
    @Part() required int part,
    @Part() File? attach,
  });