Click here to Skip to main content
15,867,568 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I am trying to upload mutliple files through axios with a description field.
i submit multiple files it's working but the problem is that when i submit array of files then in axios when i append formdata the list of files is submitting as
TypeScript
[object FileList]
and i can't access my file to send as binary.

here is my Interface for Submitting file
TypeScript
export interface attachments{
    id?:number;
    archiveid:number;
    file:Blob[] | undefined;
    attachmentDetail:attachmentDetail[];
}

export interface attachmentDetail{
    files:Blob;
    attachmentDetail:string;
}

this is my agent function that i submit my attachments with axios

TypeScript
<pre>addAttachments: (data: attachments) => {
    const formData: FormData = new FormData()
    for (let i = 0; i < data.attachmentDetail.length; i++) {
      const file=[data.attachmentDetail[i].files];
        formData.append(`Attachment[${i}]`,file[i]);
        formData.append(`Detail[${i}]`,  
            data.attachmentDetail[i].attachmentDetail);

        formData.append('ArchiveId',data.archiveid!.toString());
    return axios.post<attachments, any>('/AttachmentFile', formData, {
      headers: { 'Content-type': 'multipart/form-data' },
    });
  },



so if any solution is please kindly suggest me i am stack in it for many days

What I have tried:

i have tried this all code is in this Link of sand box

my work Link
Posted
Comments
Richard Deeming 1-Nov-22 6:31am    
The variable i is the index within the attachmentDetail array; why are you also using it to index into the attachmentDetail[i].files array?
Samim Safi 1-Nov-22 7:18am    
Because i submit multiple images than i use index to select the image from each different index
i have all my code in link Provide if possible check and give me solution thanks
Richard Deeming 1-Nov-22 7:35am    
Yes, but you're using the wrong index.

You've essentially gone to the 13th house in the street, and are now trying to find the 13th bedroom in that house, even though it only has 2 bedrooms.

You need a separate index for the attachmentDetail[i].files array.
Samim Safi 2-Nov-22 0:19am    
thanks i have tried with different index like this
for (let i = 0; i < data.attachmentDetail.length; i++) {      const file = [data.attachmentDetail[i].files];      
for (let index = 0; index < file.length; index++) {              formData.append('Attachment', file[index]);   console.log(file[index])}      formData.append('Detail', data.attachmentDetail[i].attachmentDetail);}

in this the detail index working fine but the files index send data as [object FileList]
Richard Deeming 2-Nov-22 4:45am    
const file = [data.attachmentDetail[i].files];

That creates a single-element array, whose only element is the collection of files. You need either:
const file = [...data.attachmentDetail[i].files];

or:
const file = Array.from(data.attachmentDetail[i].files);

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900