WHy does removing eventListener cause an error?

[Hom35tead]

Ok So i just wanted to remove the event listener from my uploadFiles() function in my js.  Because I want the function to kick off only when I click that button and not any other button in the form as well ass preventing the listener from running twice if somebody closes the overlay and goes back into it without refreshing.  Here is my code.  Why do I keep receiving a promise error.

It is pretty vanilla stuff.  Something I am just not seeing.The code that worls with the eventListener.
`

/* ----- Upload File / Image -----*/
function uploadFile(uid) {
 const url = 'process.php';
  const form = document.querySelector('form');
  //let uid = document.getElementById('upid').value;
 
    var data = {
      auploadid: "1",
      auserid: "1",
    };

  const btn = document.getElementById('newFiles');
 
 
  //console.log("Run Onlick");
  form.addEventListener('submit', e => {
    //console.log("Run Heard The Click");
      e.preventDefault();
 
      const files = document.querySelector('[type=file]').files;
      const formData = new FormData();
 
      for (let i = 0; i < files.length; i++) {
          let file = files[i];
          //console.log(uid);
          formData.append('files[]', file);
          formData.append('uploadid', uid);
      }
 
      fetch(url, {
          method: 'POST',
          body: formData
      }).then(response => {
          return response.text();
      }).then(data => {
          console.log(data);
      });
  });
  return;
}

And this is the code that throws the error. Again, all I am trying to do is remove the event Listener.

/* ----- Upload File / Image Without Listener-----*/
function uploadFiles(uid) {
  const url = 'process.php';
  //const form = document.querySelector('form');
  const form = document.getElementById("uploadForm");
 
  //e.preventDefault();

  const files = document.querySelector('[type=file]').files;
      const formData = new FormData();
 
      for (let i = 0; i < files.length; i++) {
          let file = files[i];
          //console.log(uid);
          formData.append('files[]', file);
      }
  formData.append('uploadid', uid);
  fetch(url, {
    method: 'POST',
    body: formData
}).then(response => {
    return response.text();
}).then(data => {
    console.log(data);
});
return;
}

 

 

[requinix]

If you're having a problem with an error then it's typically very helpful to others if you mention what that error is.

[Strider64]

/* ----- Upload File / Image ----- */
function uploadFile(uid) {
    const url = 'process.php';
    const form = document.querySelector('form');
    
    form.onsubmit = function(e) {
        e.preventDefault();

        const files = document.querySelector('[type=file]').files;
        const formData = new FormData();

        for (let i = 0; i < files.length; i++) {
            let file = files[i];
            formData.append('files[]', file);
            formData.append('uploadid', uid);
        }

        fetch(url, {
            method: 'POST',
            body: formData
        }).then(response => {
            return response.text();
        }).then(data => {
            console.log(data);
        });
    };
    
    return;
}

Instead of using the addEventListener method for the form submission, you can directly bind the function to the form's onsubmit?

[requinix]

2 hours ago, Strider64 said:

Instead of using the addEventListener method for the form submission, you can directly bind the function to the form's onsubmit?

Using those handlers is frowned upon in modern Javascript. For one, because it's not actually a binding process: you're literally assigning a function to that property, which means you can't assign a second one to it as well.

[Hom35tead]

18 hours ago, requinix said:

Using those handlers is frowned upon in modern Javascript. For one, because it's not actually a binding process: you're literally assigning a function to that property, which means you can't assign a second one to it as well.

Ok so here is the deal.  If I packege all this code up into a single flat file in html.  It works or at least says successful and does not throw an error.  Whether the actual file moves or not I dont  yet.  However as soon as I break it down into Form on PHP file, Javascript in a js file referenced from PHP.  It stops working and gives me an error. "Uncaught type (in promise)"

 

The whole reason I am trying to avoid the EventListener is because if the user opens the overlay (which kicks off the function) and then closes it without uploading a file.  When they reopen that form it listens for the 'submit' event two times.  Uploads two files and console logs them separately, so I know it is running the actual function 2 times.  I like the onlick or onsubmit binding (false binding) as I can reuse this function over and over without it screwing up my other stuff.  Like I can use the same function on multiple parts of the application without havng to have a listener on every page.  Is there a better approach?

-Home3s

[Hom35tead]

22 hours ago, requinix said:

If you're having a problem with an error then it's typically very helpful to others if you mention what that error is.

Sorry, i completely left that out.  It is "uncaught Type (in promise) error.  Pretty much all it says.

[requinix]

5 hours ago, Hom35tead said:

Sorry, i completely left that out.  It is "uncaught Type (in promise) error.  Pretty much all it says.

"Uncaught TypeError"? What is the uncaught TypeError it speaks of? There should be more to the message than just that...