Multiple file upload using formdata, formdata structure changing on 1 file vs. 2 files vs 3+ files

Question

When uploading 1 file, data structure is as follows:

files.<custom_file_upload_name>.FileObject

for example

files.fileUpload.name  -> image.jpg

When uploading 2 files, data structure is as follows:

files.<custom_file_upload_name>[ {File object}, {File object} ]

for example

files.fileUpload[0].name  -> image1.jpg
files.fileUpload[1].name  -> image2.jpg

When uploading 3 files, data structure is as follows:

files.<custom_file_upload_name>[ [{File object}, {File object}], {File object} ]

for example

files.fileUpload[0][0].name  -> image1.jpg
files.fileUpload[0][1].name  -> image2.jpg
files.fileUpload[1].name  -> image3.jpg

with 4 files, data structure gets even more complex

files.fileUpload ->

[ 
    [ 
        [ 
            {fileObject}, 
            {fileObject} 
        ],
        {fileObject} 
    ],
    {fileObject} 
]

Tried different browsers on ubuntu 16.04, Mozilla and Chrome. With both the issue is the same.

HTML input (angular frontend):

<input type="file" (change)="onUploadChange($event)" multiple/>

files to FormData:

fileList: FileList = event.target.files;

if(fileList.length > 0) {
 let formData = new FormData();
  for(let i = 0; i < fileList.length; i++) {
   let file: File = fileList.item(i);
   formData.append('fileUpload', file);
  }
}

I post the formdata to backend and make handling. It works, but all these different situations with different amounts of files seem odd, could this be browser specific issue?

files.fileUpload should include one array with all the files, but data structure differs with 1, 2 and 3+ files.

Answer 1

I fixed the problem by uploading files one file at time.

I made angular formControl for each uploaded file and tried to upload them all again in formData, but the problem persisted.

Only solution seems to be to upload files one by one. And, i think, it works much better.