File chooser Review

<duet-layout center>
  <div slot="main">
    <duet-file-chooser accept=".pdf" id="file-chooser" multiple>
    </duet-file-chooser>
    <duet-button
      id="open-button"
      size="small"
      variation="secondary"
      fixed
      icon="action-add-circle"
    >
      Open file chooser
    </duet-button>
    <div id="file-list"></div>
    <duet-button variation="primary" id="submit-button">Upload</duet-button>
  </div>
</duet-layout>

<script>
  const fileChooser = document.querySelector("#file-chooser")
  const submitButton = document.querySelector("#submit-button")
  // store files in array to upload them
  const addedFiles = []

  const openButton = document.querySelector("#open-button");

  openButton.addEventListener("click", () => {
    fileChooser.open()
  });

  const addFile = (file) => {
    const duetFile = document.createElement("p");
    duetFile.innerText = file.name;
    addedFiles.push(file)

    const fileList = document.getElementById("file-list");
    fileList.appendChild(duetFile);
  }

  //listener for handling file change in file chooser
  fileChooser.addEventListener("duetChange", (event) => {
    const files = event.detail.data.files;
    console.log("! Selected files", event.detail.data.files);

    for (let i = 0; i < files.length; i++) {
      const file = files.item(i);
      // This is how to access file mime type
      console.log("! File MIME type", file.type);

      addFile(files.item(i));
    }
  });

  submitButton.addEventListener("click", () => {
    console.log("Files to upload: ", addedFiles)
  });

</script>