I am trying to upload multiple images via axios to backend server on a new application. It worked perfectly on my previous applications I have developed. When I did some inspections, the problem was there were a couple of arrays with empty values added to the formdata. It didn't happen on the previous apps I developed.

This is the code to upload the files:

     const formData = new FormData();
     
     for(var i =0;i<data.files.length;i++){
      let name = data.files[i].name
      let ext = data.files[i].name.split('.')
      ext = ext[ext.length-1].toLowerCase() == 'dcm' ? 'DCM':'IMG'
      let content = data.files[i]
      console.log({name,ext,content})
      formData.append('types',ext)
      formData.append('names',name)
      formData.append('images',content)
    }

    const response = await axios.post(`${API_BASE_URL}images/`, 
      formData,
      {
        headers: {
          "Content-Type": 'application/x-www-form-urlencoded',
          "Authorization": TOKEN
        }
      })
      return response;

This is the request payload of the old application

And this is the request payload of the new application

I use the same exact code for both of the new and old app. Notice that in the new app somehow the formdata appends a lot of arrays with empty values, while in the old app there's no such thing.

Can anybody tell me what happened here?

EDIT: It seems that axios's current version (0.27.1) sends data differently than the previous axios version I used (0.26.0). It worked fine when I downgraded the version number. Still curious what happened though...