[SOLVED] Can Somebody explain why the files of the DataTransfer is not showing at all?

Issue

I am trying to add files to an input file but when I do console the dataTransfer I do see the files and when I access the files it return basically nothing and I can see the files when I console log them before accessing them through .files

_dataFiles = new DataTransfer();
            var images = document.querySelectorAll("#UpdatePostModal .post-images__child img")
            images.forEach((img, index) => {
                var _ImgName = img.currentSrc.split("/").at(-1)
                // the srcToFile function will return a promise
                // so we need to call the then method to get the result which is a file
                srcToFile(img.currentSrc, _ImgName, "image/jpeg").then(
                    function (file) {
                        _dataFiles.items.add(file);
                    }
                );
            })
            console.log(_dataFiles) here I can see the files and their length 
            console.log(_dataFiles.files)// but I get nothing length 0
            var image_input = $(updateFormLocal).find("#id_images")[0];
            console.log(image_input.files)

What am i doing wrong by the way here the srcToFile function.

function srcToFile(src, fileName, mimeType) {
    return (fetch(src)
        .then(function (res) { return res.arrayBuffer(); })
        .then(function (buf) { return new File([buf], fileName, { type: mimeType }); })
    );
}

Solution

Honestly I don’t really know how it worked but I finally get me the result that I was seeking at least. but if somebody is willing to explain me how it worked, it would be great.
first I added used await / async as @Gonzalingui suggested but I appended files inside the for loop rather waiting for it to finish.
Again if someone can explain what is really going on and how it made it work ?

var _dataFiles = new DataTransfer();
            var images = document.querySelectorAll("#UpdatePostModal .post-images__child img")
            var image_input = $(updateFormLocal).find("#id_images")[0];
            images.forEach((img, index) => {
                var _ImgName = img.currentSrc.split("/").at(-1)
                // the srcToFile function will return a promise
                // so we need to call the then method to get the result which is a file
// var filesArr = srcToFile(img.currentSrc, _ImgName, "image/jpeg")
async function test() {
    var file = await srcToFile2(img.currentSrc, _ImgName, "image/jpeg")
    _dataFiles.items.add(file)
    image_input.files = _dataFiles.files
    console.log(image_input.files)
}
test();
console.log(image_input.files)

})

And finally I also changed the function srcToFile to user async /await

    async function srcToFile2(src, fileName, mimeType) {
    const res = await fetch(src)
    const arr = await res.arrayBuffer()
    return new File([arr], fileName, { type: mimeType });

}

Answered By – Papis Sahine

Answer Checked By – Dawn Plyler (BugsFixing Volunteer)