fix: lock upload button until tour redirect
deploy-preland / deploy barbariskatest (push) Successful in 22s

This commit is contained in:
Panfilov Konstantin committed 2026-10-16 05:23:52 +03:00
1 parent cf651218cc
commit 700408c1e0
2 files changed
+60 -71

No files matched your search

+47 -71
View File
@@ -31,7 +31,7 @@ $redirectUrlUtm = $redirect_url_utm ?? '';
</div>
<div class="dropzone-form-action">
<button type="button" class="dropzone-form-button">
<span><?= Yii::t('app', 'Загрузить изображение') ?></span>
<span data-upload-label><?= Yii::t('app', 'Загрузить изображение') ?></span>
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.3333 14.6667C15.6345 14.6667 17.5 12.8012 17.5 10.5C17.5 8.43079 15.9917 6.71387 14.0145 6.38874C14.0113 6.38821 14.0086 6.38583 14.0078 6.38267C13.4802 4.43373 11.6992 3 9.58333 3C7.05203 3 5 5.05203 5 7.58333C5 7.75477 5.00941 7.924 5.02775 8.09055C5.0282 8.0947 5.0255 8.09856 5.02145 8.09957C3.57289 8.4621 2.5 9.77242 2.5 11.3333C2.5 13.1743 3.99238 14.6667 5.83333 14.6667H6.66667M10 8.83726V18M10 8.83726L7.5 11.3333M10 8.83726L12.5 11.3333" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
@@ -86,9 +86,49 @@ $redirectUrlUtm = $redirect_url_utm ?? '';
.catch(() => {});
}
let columnsSwapped = false;
let uploadPending = false;
let uploadDots = 1;
let uploadDotsTimer = null;
const uploadButton = formEl.querySelector('.dropzone-form-button');
const uploadButtonLabel = uploadButton?.querySelector('[data-upload-label]');
const uploadButtonDefaultLabel = uploadButtonLabel?.textContent || '';
function renderUploadButton() {
if (uploadButtonLabel) uploadButtonLabel.textContent = 'Загрузка' + '.'.repeat(uploadDots);
}
function beginUploadPending() {
if (uploadPending) return false;
uploadPending = true;
uploadDots = 1;
renderUploadButton();
if (uploadButton) {
uploadButton.disabled = true;
uploadButton.setAttribute('aria-busy', 'true');
}
uploadDotsTimer = window.setInterval(() => {
uploadDots = uploadDots === 5 ? 1 : uploadDots + 1;
renderUploadButton();
}, 500);
return true;
}
function resetUploadPending() {
uploadPending = false;
if (uploadDotsTimer !== null) window.clearInterval(uploadDotsTimer);
uploadDotsTimer = null;
if (uploadButtonLabel) uploadButtonLabel.textContent = uploadButtonDefaultLabel;
if (uploadButton) {
uploadButton.disabled = false;
uploadButton.removeAttribute('aria-busy');
}
}
formEl.addEventListener('click', (e) => {
if (uploadPending) {
e.preventDefault();
return;
}
if (e.target !== fileInput) {
fileInput.click();
}
@@ -111,6 +151,7 @@ $redirectUrlUtm = $redirect_url_utm ?? '';
});
formEl.addEventListener('drop', (e) => {
if (uploadPending) return;
const files = e.dataTransfer?.files;
if (files && files.length > 0) {
handleSelectedFile(files[0]);
@@ -118,80 +159,15 @@ $redirectUrlUtm = $redirect_url_utm ?? '';
});
fileInput.addEventListener('change', () => {
if (uploadPending) return;
if (fileInput.files && fileInput.files.length > 0) {
handleSelectedFile(fileInput.files[0]);
}
});
function swapColumns() {
if (columnsSwapped) return;
const col5 = document.querySelector('.col-md-5');
const col7 = document.querySelector('.col-md-7');
if (col5 && col7) {
const temp = document.createElement('div');
col5.replaceWith(temp);
col7.replaceWith(col5);
temp.replaceWith(col7);
columnsSwapped = true;
}
}
function handleSelectedFile(file) {
const objectUrl = URL.createObjectURL(file);
const img = new Image();
img.onload = () => {
const width = img.naturalWidth;
const height = img.naturalHeight;
form.hide();
swapColumns();
if (typeof preview !== 'undefined' && preview) {
const col7 = document.querySelector('.col-md-7');
if (col7) col7.appendChild(preview.el);
preview.hide();
preview.setSource(objectUrl);
preview.show();
}
if (typeof process !== 'undefined' && process) {
const col5 = document.querySelector('.col-md-5');
if (col5) col5.appendChild(process.el);
process.setFilename(file.name);
process.setSize(file.size);
process.setDimensions(width, height);
process.setStage(0);
process.setStatus(0);
process.show();
}
if (typeof examples !== 'undefined' && examples) {
examples.hide();
}
uploadFile(file);
};
img.onerror = () => {
// Browser не обязан декодировать допустимый контейнер. Не отказываем локально:
// серверный Tour gate проверит байты и при необходимости даст JPEG-preview.
form.hide();
swapColumns();
if (typeof process !== 'undefined' && process) {
const col5 = document.querySelector('.col-md-5');
if (col5) col5.appendChild(process.el);
process.setFilename(file.name);
process.setSize(file.size);
process.setDimensions(0, 0);
process.setStage(0);
process.setStatus(0);
process.show();
}
uploadFile(file);
};
img.src = objectUrl;
if (!beginUploadPending()) return;
uploadFile(file);
}
function uploadFile(file) {
@@ -259,7 +235,7 @@ $redirectUrlUtm = $redirect_url_utm ?? '';
}
function showUploadError(msg) {
if (typeof process !== 'undefined' && process) process.hide();
resetUploadPending();
form.show();
if (typeof preview !== 'undefined' && preview) preview.showError(msg);
fileInput.value = '';
+13
View File
@@ -0,0 +1,13 @@
<?php
/** Регрессия: до редиректа на Tour повторная загрузка блокируется для любого формата. */
$form = (string) file_get_contents(dirname(__DIR__) . '/components/form.php');
foreach (['function beginUploadPending', 'uploadDots', 'Загрузка', 'uploadPending'] as $needle) {
if (!str_contains($form, $needle)) {
fwrite(STDERR, "FAIL: preland uploader must contain {$needle}\n");
exit(1);
}
}
echo "OK: preland upload button state\n";