Search code examples
node.jsreactjsexpressmulterredux-saga

Axios with Redux Saga not sending form data when insert and put to nodeJs+express api


currently i am using react with nodeJS and express as api. When I send data to api using redux saga without formData it works fine, but when I try to submit with formData, there is an res message and I think it happened because the payload that was sent was empty

enter image description here

and on the network-payload tab, no form data is sent

enter image description here

here's the code I use

export const addNewData = values => {
    const data = new FormData()
    data.append("nama", values.nama)
    data.append("harga", values.harga)
    // data.append("image", selectedFiles)
    data.append("fasilitas", values.fasilitas)
    data.append("deskripsi", values.deskripsi)

    post(url.ADD_NEW_DATA, data, {
        headers: { "content-type": "multipart/form-data" },
    })
}

and

const axiosApi = axios.create({
  baseURL: API_URL,
})

axiosApi.defaults.headers.common["authorization"] = token

axiosApi.interceptors.response.use(
  response => response,
  error => Promise.reject(error)
)

export async function post(url, data, config = {}) {
    return axiosApi
        .post(url, { ...data }, { ...config })
        .then(response => response.data.data)
}

then I tried directly on the submit button without using redux saga and it worked perfectly

Axios.post("http://localhost:4000/v1/data/insert", data, {
        headers: {
          "content-type": "multipart/form-data",
          "authorization": token,
        },
      })
        .then(res => {
          console.log("success ", res)
        })
        .catch(err => console.log(err))

Can anyone help me please? I want to keep using redux saga

UPDATE When i change {...data} to data in async function, formData is successfully sent normally, anyone can explain about this? will it affect when I submit data not in formData format?

export async function post(url, data, config = {}) {
    return axiosApi
        .post(url, data, { ...config })
        .then(response => response.data.data)
}

Solution

  • Solved by changing {...data} to data

    export async function post(url, data, config = {}) {
        return axiosApi
            .post(url, data, { ...config })
            .then(response => response.data.data)
    }