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?

The first try makes no sense (just check the content of uploadFile). And the second is missing a parameter. — Andreas
– Andreas, Commented Jul 8, 2020 at 9:40

IVO GELOV · Accepted Answer · 2020-07-09 07:02:58Z

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 9, 2020 at 7:02

answered Jul 8, 2020 at 9:46

IVO GELOV

14.3k1 gold badge21 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Adam Over a year ago

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 Over a year ago

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?

Desu · Accepted Answer · 2020-07-08 09:45:00Z

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 8, 2020 at 9:45

Desu

9101 gold badge13 silver badges18 bronze badges

Comments

M.Soyturk · Accepted Answer · 2020-07-08 09:58:22Z

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

Collectives™ on Stack Overflow

javascript .forEach loop with nested code

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related