268 lines
9.3 KiB
PHP
268 lines
9.3 KiB
PHP
<?php
|
|
|
|
$errorMessage = Yii::t('app', 'Возникла ошибка');
|
|
$utmJson = json_encode($UTM ?? [], JSON_UNESCAPED_UNICODE);
|
|
|
|
$createApiUrl = ($apiHost ?? '') . '/api/images/public/create';
|
|
$uploadPolicyApiUrl = ($apiHost ?? '') . '/api/images/public/upload-policy';
|
|
$redirectUrlBase = $redirect_url_base ?? '';
|
|
$redirectUrlUtm = $redirect_url_utm ?? '';
|
|
|
|
?>
|
|
|
|
<form action="<?= htmlspecialchars($createApiUrl, ENT_QUOTES, 'UTF-8') ?>" class="dropzone-form gradient-dashed-border" id="dropzone-form" method="POST" style="background: transparent; border: unset; display: <?= ($show ?? true) ? '' : 'none'; ?>; cursor: pointer;">
|
|
|
|
<div class="dropzone-form-inner">
|
|
<div class="dropzone-form-icon">
|
|
<img src="<?= $assetsUriPrefix; ?>/images/dropzone-icon.svg" alt="" height="64" width="64">
|
|
</div>
|
|
<div id="form-title" class="dropzone-form-text"><?= Yii::t('app', 'Загрузите изображение') ?> <br class="d-md-none"><?= Yii::t('app', 'для улучшения') ?></div>
|
|
<div class="dropzone-form-format">
|
|
<div class="dropzone-form-format-label"><?= Yii::t('app', 'Поддерживаемые форматы') ?>:</div>
|
|
<div class="dropzone-form-format-list">
|
|
<div class="dropzone-form-format-item">JPG</div>
|
|
<div class="dropzone-form-format-item">PNG</div>
|
|
<div class="dropzone-form-format-item">HEIC</div>
|
|
<div class="dropzone-form-format-item">WebP</div>
|
|
<div class="dropzone-form-format-item">GIF</div>
|
|
<div class="dropzone-form-format-item">+много</div>
|
|
</div>
|
|
</div>
|
|
<div class="dropzone-form-action">
|
|
<button type="button" class="dropzone-form-button">
|
|
<span><?= 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>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<input type="file" id="dropzone-file-input" name="file" accept=".jpg,.jpeg,.png,.webp,.heic,.heif,.gif,.tif,.tiff,.bmp,.avif,.jxl,.dng" style="display: none;">
|
|
</form>
|
|
|
|
<script>
|
|
const form = {
|
|
el: document.getElementById('dropzone-form'),
|
|
titleEl: document.getElementById('form-title'),
|
|
|
|
hide() {
|
|
window.scrollTo(0, 0);
|
|
window.scrollTo({ top: 0, behavior: 'instant' });
|
|
if (this.el) this.el.style.display = 'none';
|
|
},
|
|
show() {
|
|
if (this.el) this.el.style.display = '';
|
|
},
|
|
setTitle(html) {
|
|
if (this.titleEl) this.titleEl.innerHTML = html;
|
|
}
|
|
};
|
|
|
|
const utmData = <?= $utmJson ?>;
|
|
const redirectUrlBase = <?= json_encode($redirectUrlBase, JSON_UNESCAPED_UNICODE) ?>;
|
|
const redirectUrlUtm = <?= json_encode($redirectUrlUtm, JSON_UNESCAPED_UNICODE) ?>;
|
|
const createApiUrl = <?= json_encode($createApiUrl, JSON_UNESCAPED_UNICODE) ?>;
|
|
const uploadPolicyApiUrl = <?= json_encode($uploadPolicyApiUrl, JSON_UNESCAPED_UNICODE) ?>;
|
|
|
|
const genericErrorMsg = <?= json_encode($errorMessage, JSON_UNESCAPED_UNICODE) ?>;
|
|
|
|
(function initNativeUploader() {
|
|
const formEl = document.getElementById('dropzone-form');
|
|
const fileInput = document.getElementById('dropzone-file-input');
|
|
if (!formEl || !fileInput) return;
|
|
|
|
// `accept` — только удобство picker. Преленд не дублирует Settings:
|
|
// разрешённый для наблюдения PDF добавляется неблокирующим запросом к API.
|
|
if (uploadPolicyApiUrl && window.fetch) {
|
|
fetch(uploadPolicyApiUrl, { credentials: 'omit', cache: 'no-store' })
|
|
.then(response => response.ok ? response.json() : null)
|
|
.then(policy => {
|
|
if (policy?.pdf_observation_enabled) {
|
|
fileInput.accept += ',.pdf';
|
|
}
|
|
})
|
|
.catch(() => {});
|
|
}
|
|
|
|
let columnsSwapped = false;
|
|
|
|
formEl.addEventListener('click', (e) => {
|
|
if (e.target !== fileInput) {
|
|
fileInput.click();
|
|
}
|
|
});
|
|
|
|
['dragenter', 'dragover'].forEach(eventName => {
|
|
formEl.addEventListener(eventName, (e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
formEl.classList.add('dragover');
|
|
});
|
|
});
|
|
|
|
['dragleave', 'dragend', 'drop'].forEach(eventName => {
|
|
formEl.addEventListener(eventName, (e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
formEl.classList.remove('dragover');
|
|
});
|
|
});
|
|
|
|
formEl.addEventListener('drop', (e) => {
|
|
const files = e.dataTransfer?.files;
|
|
if (files && files.length > 0) {
|
|
handleSelectedFile(files[0]);
|
|
}
|
|
});
|
|
|
|
fileInput.addEventListener('change', () => {
|
|
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;
|
|
}
|
|
|
|
function uploadFile(file) {
|
|
const xhr = new XMLHttpRequest();
|
|
const formData = new FormData();
|
|
// Ключ загрузки: по нему сайт передаёт её в сессию посетителя (/api/images/public/claim, годен 30 мин).
|
|
// randomUUID есть в HTTPS-контексте; где его нет (старый Safari), есть getRandomValues.
|
|
const clientKey = crypto.randomUUID
|
|
? crypto.randomUUID()
|
|
: Array.from(crypto.getRandomValues(new Uint8Array(16)), (b) => b.toString(16).padStart(2, '0')).join('');
|
|
formData.append('file', file);
|
|
formData.append('client_key', clientKey);
|
|
|
|
const actionUrl = createApiUrl || formEl.getAttribute('action') || '/api/images/public/create';
|
|
xhr.open('POST', actionUrl, true);
|
|
xhr.withCredentials = true;
|
|
xhr.setRequestHeader('Accept', 'application/json');
|
|
|
|
xhr.upload.onprogress = (e) => {
|
|
if (e.lengthComputable && typeof process !== 'undefined' && process) {
|
|
const progress = Math.round((e.loaded / e.total) * 100);
|
|
process.setStatus(progress);
|
|
}
|
|
};
|
|
|
|
xhr.onload = () => {
|
|
if (xhr.status >= 200 && xhr.status < 300) {
|
|
let response;
|
|
try {
|
|
response = JSON.parse(xhr.responseText);
|
|
} catch (e) {
|
|
showUploadError(genericErrorMsg);
|
|
return;
|
|
}
|
|
|
|
const imageId = response?.id || response?.data?.id || response?.image?.id || response?.image_id;
|
|
if (!imageId) {
|
|
showUploadError(genericErrorMsg);
|
|
return;
|
|
}
|
|
|
|
if (typeof process !== 'undefined' && process) {
|
|
process.setStatus(100);
|
|
process.setStage(1);
|
|
}
|
|
|
|
// Переход: $redirect_url_base . client_key . ($redirect_url_utm ? '&' . $redirect_url_utm : '')
|
|
let targetUrl = redirectUrlBase + encodeURIComponent(clientKey);
|
|
if (redirectUrlUtm) {
|
|
// const sep = targetUrl.includes('?') ? '&' : '?';
|
|
targetUrl += '&' + redirectUrlUtm;
|
|
}
|
|
|
|
window.location.href = targetUrl;
|
|
} else {
|
|
showUploadError(genericErrorMsg);
|
|
}
|
|
};
|
|
|
|
xhr.onerror = () => {
|
|
showUploadError(genericErrorMsg);
|
|
};
|
|
|
|
xhr.send(formData);
|
|
}
|
|
|
|
function showUploadError(msg) {
|
|
if (typeof process !== 'undefined' && process) process.hide();
|
|
form.show();
|
|
if (typeof preview !== 'undefined' && preview) preview.showError(msg);
|
|
fileInput.value = '';
|
|
}
|
|
})();
|
|
</script>
|