Отображение диалогового окна подтверждения при загрузке файла с использованием расширения Chrome. ⇐ Javascript

[Anonymous]

Я пытаюсь использовать расширение Chrome для отображения диалогового окна подтверждения при загрузке файла.
Например, когда вы перетаскиваете файл в Google Translate, вы спросят: «Вы действительно хотите это загрузить?»
Когда я просто использую функцию подтверждения(), все работает так, как ожидалось, но когда я пытаюсь использовать пользовательскую модальную форму, это не работает. не работаю. Когда отображается пользовательская модальная форма, загрузка файла уже завершена в фоновом режиме.
Я понимаю, что это проблема с базовой асинхронной функциональностью, но не знаю, как это сделать. заставить его работать правильно с помощью специальной модальной формы.
Может ли кто-нибудь мне помочь?
Шаблон ОК:

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

document.addEventListener("drop", (event) => {
event.preventDefault();

if (event.dataTransfer && event.dataTransfer.files.length > 0) {

const userConfirmed = confirm("file upload?");

if (userConfirmed) {
alert('proceed upload.');
} else {
event.stopPropagation();
alert('cancel upload.');
}
}
}, true);

Шаблон NG:

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

document.addEventListener("drop", (event) => {
event.preventDefault();

if (event.dataTransfer && event.dataTransfer.files.length > 0) {
// Create and show custom modal for file upload confirmation
createCustomModal(event);
}
}, true);

// Function to create and display the custom modal
function createCustomModal(event) {
// Create the modal element
const modal = document.createElement('div');
modal.style.position = 'fixed';
modal.style.top = '0';
modal.style.left = '0';
modal.style.width = '100%';
modal.style.height = '100%';
modal.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
modal.style.display = 'flex';
modal.style.justifyContent = 'center';
modal.style.alignItems = 'center';
modal.style.zIndex = '1000';

// Create the modal content container
const modalContent = document.createElement('div');
modalContent.style.backgroundColor = '#fff';
modalContent.style.padding = '20px';
modalContent.style.borderRadius = '8px';
modalContent.style.boxShadow = '0px 4px 8px rgba(0, 0, 0, 0.1)';
modalContent.style.textAlign = 'center';
modalContent.innerHTML = `
File Upload Confirmation
Do you want to upload the file?
Upload
Cancel
`;

modal.appendChild(modalContent);
document.body.appendChild(modal);

// If "Upload" button is clicked
const confirmBtn = modal.querySelector('#confirmBtn');
confirmBtn.addEventListener('click', () => {
alert('Proceeding with the upload.');
document.body.removeChild(modal); // Remove the modal
// Add your upload processing logic here
});

// If "Cancel" button is clicked
const cancelBtn = modal.querySelector('#cancelBtn');
cancelBtn.addEventListener('click', () => {
alert('Upload has been canceled.');
document.body.removeChild(modal); // Remove the modal
// Stop the event propagation to prevent other handlers
event.stopPropagation();
});
}

Я подумал, что можно было бы переписать его с помощью async/await, но не знал, как это сделать.

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