react native post form data with object and file in it using axios

when you are using react-native you don’t need “form-data” package. Because react native polyfills standard FormData api and exports it as global.

second problem is axios converts form data automatically to string, so you need to use transformRequest config on request to override it.

import { AxiosRequestConfig } from "axios";
const FormData = global.FormData;

const axiosInstance = axios.create({
    baseURL: 'example.com', // use with scheme
    timeout: 30000,
    headers: {
        "X-Platform": 'iOS',
        "X-App-Build-Number": '1.0.0',
    },
});

const formData = new FormData();
formData.append("userId", "123456");
formData.append("file", {
    uri: "/dev/sda/abc.png",
    type: "image/png",
    name: "abc.png",
});

const config: AxiosRequestConfig = {
    method: "post",
    url: "/process/start",
    responseType: "json",
    headers: {
        'Content-Type': 'multipart/form-data',
        // if backend supports u can use gzip request encoding
        // "Content-Encoding": "gzip",
    },
    transformRequest: (data, headers) => {
        // !!! override data to return formData
        // since axios converts that to string
        return formData;
    },
    onUploadProgress: (progressEvent) => {
        // use upload data, since it's an upload progress
        // iOS: {"isTrusted": false, "lengthComputable": true, "loaded": 123, "total": 98902}
    },
    data: formData,
};

// send post request and get response
const response = await axiosInstance.request(config);