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 }); })
);
}
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 });
}