javascript .forEach loop with nested code

Question

I have this code:

function uploadFiles(event) {
    event.preventDefault();

    files = [...fileElem.files]

    files.forEach(uploadFile)

}

function uploadFile(file, i) {

}

Now, I want to add code to files.forEach(uploadFile)

Pseudo code: files.forEach(
uploadFile(); console.log(file.name); )

I looked here: For-each over an array in JavaScript So I tried:

files.forEach(function(uploadFile) {
    uploadFile();
    console.log(file.name); 
})

files.forEach(function (entry) {            
    console.log(entry.name);
    uploadFile(entry);
})

But I guess I don't understand how this works. How can I execute the function uploadFile and access the properties of file in the same codeblock?

[`Array.prototype.forEach()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) — Andreas, Jul 08 '20 at 09:39
The first try makes no sense (just check the content of `uploadFile`). And the second is missing a parameter. — Andreas, Jul 08 '20 at 09:40

IVO GELOV · Accepted Answer · 2020-07-09T07:02:58.837

1

Use this code:

function uploadFiles(event) 
{
    event.preventDefault();

    files = [...fileElem.files]

    files.forEach(extendedUploadFile)
    clearFileInput(fileElem);
}

function uploadFile(file, i) 
{
 ....
}

function extendedUploadFile(file, i)
{
    console.log(file.name);
    uploadFile(file, i);
}

// reset/clear FILE type inputs
function clearFileInput(ctrl)
{
  try
  {
    ctrl.value = null;
  }
  catch(ex)
  { }
  if (ctrl.value) ctrl.parentNode.replaceChild(ctrl.cloneNode(true), ctrl);
}

edited Jul 09 '20 at 07:02

answered Jul 08 '20 at 09:46

IVO GELOV

13,496
1
17
26

One more thing: after extendUploadFile has completed successfully, how can I remove files from the `fileElem` control Filelist (so that when user clicks upload button again it won't double submit the file)? – Adam Jul 08 '20 at 15:18
Thank you. However, that clears the whole filelist, I was looking to only clear the files that have been uploaded successfully. How would you do that? – Adam Jul 09 '20 at 18:16

score 0 · Answer 2 · answered Jul 08 '20 at 09:45

0

I think you want to do something like this:

files.forEach( file => {
       uploadFile(file);
 });

Not sure what i meant on upload file, guessing it's an iterator:

for(var x = 0; x < files.length){
uploadFile(file[x],x);
}

answered Jul 08 '20 at 09:45

Desu

840
1
11
17

score 0 · Answer 3 · answered Jul 08 '20 at 09:58

As Andreas pointed out, Mozilla's forEach documentation is sufficient enough to understand how it works.

function logArrayElements(element, index, array) {
   console.log('a[' + index + '] = ' + element)
}

[2, 5, 9].forEach(logArrayElements)

When you iterate over an array, for each element you get the element, index and the array object being traversed. In your case you don't need the array object being traversed for each element. So you can ignore it and do something like this:

function uploadFiles(event) {
    event.preventDefault();
    files = [...fileElem.files]
    files.forEach(uploadFile)
}

function uploadFile(file, index) {
    console.log(file.name) (Reach the properties of the file)
    ... (Do the uploading)
}

javascript .forEach loop with nested code

3 Answers3