multipart/form-data possible to send with javascript?

Question

I am sending a file over POST together with text "name" using this form:

<form enctype="multipart/form-data" action="https://site[DOT]net/upload" method="post">
  <input id="name" type="text" />
  <input id="data" type="file" />
  <button type="submit" name="submit" />
</form>

I would like to do the exect same using javascript. In addition I dont want to be redirected. I want to stay on the html page and just show a popup "Upload done". How can I do this in javascript (no jquery)?

EDIT:

I tried this code but the POST is not working:

<script>
function uploader {
  var formData = new FormData();
  formData.append("name", "Smith");
  formData.append("data", fileInputElement.files[0]);
  var request = new XMLHttpRequest();

  request.open("POST", "https://site[DOT]net/upload");
  request.send(formData);
}
</script>

<form>
    <input id="name" type="text" />
    <input id="data" type="file" />
    <button type="submit" name="submit" />
    <button onclick="uploader()">Click</button>
</form>

Answer 1

In case any wants to do this with the new fetch instead of xhr this is the equivalent. Also see: How do I POST with multipart form data using fetch?

var form = document.getElementById('formid');

form.onsubmit = async (e) => {
  e.preventDefault();
  const form = e.currentTarget;
  const url = form.action;

  try {
      const formData = new FormData(form);
      const response = await fetch(url, {
          method: 'POST',
          body: formData
      });

      console.log(response);
  } catch (error) {
      console.error(error);
  }

}

<form id="formid" enctype="multipart/form-data" action="#" method="post">
  <input id="name" type="text" />
  <input id="data" type="file" />
  <button type="submit" name="submit">Submint</button>
</form>