How can I add additional data in FormData when uploading multiple files/folder?

Question

I am trying to upload multiple files/folder from front-end and for some reason In my back-end I want information like - File Name, File Extension, Location of File in the Uploaded Folder and so on..

Now I am able to upload multiple files/folder but my problem comes when I am looping all the selected files to append in FormData(), I also want to append information like - File Name, File Extension, Location of File in the Uploaded Folder, for individual file so that I can identify in my back-end.

this is what I am doing----:

const uploadFolder = document.querySelector('#upload-folder');
uploadFolder.addEventListener('change', async ()=>{

    const url = "/home/photos/my-photos/";
    let files = uploadFolder.files;
    let header = {'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest',  'X-CSRFToken': window.CSRF_TOKEN}
    let formData = new FormData()
    
    for (const key in files) {
        const file = files[key];
        
        if (file.name && file.webkitRelativePath){

            const fileExtension = file.name.split(".")[(file.name.split(".").length)-1]
            const filePath = file.webkitRelativePath.replace(file.name, "")

            formData.append(`file-${key}`, file);
            // Here I also want to append fileExtension, filePath, and also name of the file. 
            // I tried by giving formData.append(`file-${key}`, file, fileExtension, filePath, file.name);
            // but unfortunatly it didn't work
        }
    }

    await fetch("/home/photos/my-photos/", {method: "POST", mode: 'same-origin',  
            headers: header,
            body: formData
        })
})

Answer 1

You need to call formData.append() for each key you want to add.

For example:

formData.append(`file-${key}-path`, filePath)