first commit
This commit is contained in:
root committed
commit
792676e974
169 files changed
+6195
No files matched your search
@@ -0,0 +1,262 @@
|
||||
<?php
|
||||
|
||||
$maxSide = 6000;
|
||||
|
||||
$errorSizeMessage = Yii::t('app', 'Изображение слишком большое ({width}x{height}px). Максимальный размер — {maxSide}px по большей стороне.', [
|
||||
'maxSide' => $maxSide,
|
||||
]);
|
||||
$errorMessage = Yii::t('app', 'Возникла ошибка');
|
||||
$utmJson = json_encode($UTM ?? [], JSON_UNESCAPED_UNICODE);
|
||||
|
||||
$createApiUrl = ($apiHost ?? '') . '/api/images/public/create';
|
||||
$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">png</div>
|
||||
<div class="dropzone-form-format-item">jpeg</div>
|
||||
<div class="dropzone-form-format-item">jpg</div>
|
||||
<div class="dropzone-form-format-item">webp</div>
|
||||
<div class="dropzone-form-format-item">heic</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="image/jpeg,image/png,image/jpg,image/webp,image/heic,.heic" 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 errorSizeTpl = <?= json_encode($errorSizeMessage, 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;
|
||||
|
||||
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 maxSide = 6000;
|
||||
const objectUrl = URL.createObjectURL(file);
|
||||
const img = new Image();
|
||||
|
||||
img.onload = () => {
|
||||
const width = img.naturalWidth;
|
||||
const height = img.naturalHeight;
|
||||
|
||||
if (width > maxSide || height > maxSide) {
|
||||
URL.revokeObjectURL(objectUrl);
|
||||
fileInput.value = '';
|
||||
|
||||
const msg = errorSizeTpl
|
||||
.replace('{width}', width)
|
||||
.replace('{height}', height);
|
||||
|
||||
form.show();
|
||||
if (typeof preview !== 'undefined' && preview) {
|
||||
const col7 = document.querySelector('.col-md-7');
|
||||
if (col7) col7.appendChild(preview.el);
|
||||
preview.show();
|
||||
preview.showError(msg);
|
||||
}
|
||||
if (typeof process !== 'undefined' && process) process.hide();
|
||||
if (typeof examples !== 'undefined' && examples) examples.hide();
|
||||
return;
|
||||
}
|
||||
|
||||
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 = () => {
|
||||
URL.revokeObjectURL(objectUrl);
|
||||
if (typeof preview !== 'undefined' && preview) {
|
||||
preview.show();
|
||||
preview.showError(genericErrorMsg);
|
||||
}
|
||||
};
|
||||
|
||||
img.src = objectUrl;
|
||||
}
|
||||
|
||||
function uploadFile(file) {
|
||||
const xhr = new XMLHttpRequest();
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
// Build redirect target URL: $redirect_url_base . $imageId . ($redirect_url_utm ? '&' . $redirect_url_utm : '')
|
||||
let targetUrl = redirectUrlBase + encodeURIComponent(imageId);
|
||||
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>
|
||||
Reference in new issue
Block a user