https://www.zwolsetheaters.nl/assets/forms/filepicker.js?v=qBbkqIqViu4zFiRdXX1NPtHWXLMj3zsmTWmtZKXjegw

1(() => {
2  document.addEventListener("BaselineLoaded", () => {
3    const fileWrappers = document.querySelectorAll(
4      ".umbraco-forms-field.fileupload"
5    );
6
7    fileWrappers.forEach((wrapper) => {
8      const input = wrapper.querySelector("input[type='file']");
9      const output = wrapper.querySelector(".selectedFiles");
10
11      if (!input || !output) return;
12
13      let selectedFiles = [];
14
15      input.addEventListener("change", (event) => {
16        selectedFiles = Array.from(event.target.files); // Store new selection
17        renderSelectedFiles();
18      });
19
20      function renderSelectedFiles() {
21        output.innerHTML = "";
22
23        selectedFiles.forEach((file, index) => {
24          const container = document.createElement("span");
25
26          const nameSpan = document.createElement("span");
27          nameSpan.textContent = file.name;
28
29          const removeButton = document.createElement("button");
30          removeButton.type = "button";
31          removeButton.className = "remove-file";
32
33          const icon = document.createElement("img");
34          icon.src = "/assets/img/base_close.svg";
35          removeButton.appendChild(icon);
36
37          removeButton.addEventListener("click", () => {
38            selectedFiles.splice(index, 1); // Remove file from list
39            updateInputFiles();
40            renderSelectedFiles(); // Re-render UI
41          });
42
43          container.appendChild(nameSpan);
44          container.appendChild(removeButton);
45          output.appendChild(container);
46        });
47      }
48
49      function updateInputFiles() {
50        const dataTransfer = new DataTransfer();
51        selectedFiles.forEach((file) => dataTransfer.items.add(file));
52        input.files = dataTransfer.files;
53      }
54    });
55  });
56})();