Как сделать триггер события изменения JavaScript на кнопке ввода скрытого файла ⇐ Html

[Anonymous]

Я создаю контент в модальном окне «Сводка заказа», используя JavaScript. В рамках таблицы я хочу предоставить пользователю возможность либо создать PDF-файл с подтверждением заказа, либо прикрепить этот PDF-файл из локального хранилища. Функция прикрепления осуществляется через скрытую кнопку типа ввода, которая вызывается с помощью видимой и специально оформленной кнопки отправки

Код: Выделить всё

summaryContainer.innerHTML = '';
for (const [supplierId, group] of supplierGroups) {
const supplierDiv = document.createElement('div');
supplierDiv.className = 'supplier-summary-table';

let supplierHtml = `
Supplier: ${group.supplier.supplierName}
`;

// Add order confirmation section
supplierHtml += `


Purchase Order


[i][/i] Generate PO

or






`;

supplierDiv.innerHTML = supplierHtml;
summaryContainer.appendChild(supplierDiv);

// Create and attach file input programmatically
const uploadContainer = supplierDiv.querySelector(`#upload-po-container-${supplierId}`);
const uploadButton = document.createElement('button');
uploadButton.className = 'btn btn-outline-secondary';
uploadButton.innerHTML = '[i][/i] Attach PO';

const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = '.pdf';
// fileInput.className = 'form-control';
fileInput.id = `po-upload-${supplierId}`;
fileInput.dataset.supplierId = supplierId;

uploadContainer.appendChild(fileInput);
uploadContainer.appendChild(uploadButton);

fileInput.addEventListener('change', function(e) {
console.log("change event triggered");
}, false);

uploadButton.onclick = (e) => {
e.preventDefault();
fileInput.value = ''; // Reset value to ensure change event
fileInput.click();
};

// Change the style to make it invisible
fileInput.style.opacity = '0';

}

Страница отображается правильно, и при нажатии кнопки Прикрепить заказ открывается окно проводника для выбора правильного файла. Однако, когда файл выбран и подтвержден, событие change не запускается, я не вижу в консоли никаких связанных с этим журналов. Кнопка также несколько зависает — нажатие на нее во второй раз не открывает окно проводника.
Я тестирую это в Firefox 134.0, работающем в Ubuntu 22.04.
Изменить
Я забыл добавить, что поиск здесь указывает на две основные причины, которые могут быть причиной этого:

• событие изменения не срабатывает поскольку выбран идентичный файл, как в данном случае, или
• элемент удаляется, поэтому необходимо включить addChild, чтобы гарантировать постоянство элемента, как здесь

В моем случае проблема сохраняется, даже если кнопка ввода нажата в первый раз, и я действительно уже пытался добавить AppendChil, но безрезультатно.>

Подробнее здесь: https://stackoverflow.com/questions/793 ... put-button