pictures in the blog
Some checks failed
CI / Check Style (push) Has been cancelled
CI / Run Clippy (push) Has been cancelled
CI / Run Tests (push) Has been cancelled

This commit is contained in:
Priec
2026-05-19 21:53:55 +02:00
parent 66e6e1bf9a
commit 6feb6f210d
10 changed files with 112 additions and 95 deletions

View File

@@ -20,12 +20,56 @@
</label>
<label>
{{ t(key="featured-image-id", lang=lang | default(value='sk')) }}
<input type="text" name="featured_image_id" value="{% if article.featured_image_id %}{{ article.featured_image_id }}{% endif %}">
<input type="text" name="featured_image_id" data-blog-image-id value="{% if article.featured_image_id %}{{ article.featured_image_id }}{% endif %}">
</label>
<div>
<input type="file" accept="image/jpeg,image/png,image/webp,image/gif" data-blog-image-file class="file-input file-input-bordered">
<button type="button" class="btn btn-outline btn-sm" data-blog-image-upload data-uploading="{{ t(key="image-uploading", lang=lang | default(value='sk')) }}" data-ready="{{ t(key="upload-featured-image", lang=lang | default(value='sk')) }}">{{ t(key="upload-featured-image", lang=lang | default(value='sk')) }}</button>
<p class="text-sm opacity-70" data-blog-image-status>{{ t(key="image-upload-help", lang=lang | default(value='sk')) }}</p>
<img data-blog-image-preview alt="" class="mt-2 max-h-48 rounded border border-base-300 object-cover" {% if article.featured_image_id %}src="/images/{{ article.featured_image_id }}"{% endif %} style="{% if not article.featured_image_id %}display: none;{% endif %}">
</div>
<label>
<input type="checkbox" name="published" {% if article.published %}checked{% endif %}>
{{ t(key="published", lang=lang | default(value='sk')) }}
</label>
<button type="submit">{{ t(key="save", lang=lang | default(value='sk')) }}</button>
</form>
<script>
(function () {
const fileInput = document.querySelector('[data-blog-image-file]');
const idInput = document.querySelector('[data-blog-image-id]');
const uploadButton = document.querySelector('[data-blog-image-upload]');
const status = document.querySelector('[data-blog-image-status]');
const preview = document.querySelector('[data-blog-image-preview]');
if (!fileInput || !idInput || !uploadButton || !status || !preview) return;
function setPreview(filename) {
if (!filename) return;
preview.src = '/images/' + filename;
preview.style.display = '';
}
uploadButton.addEventListener('click', async function () {
const file = fileInput.files && fileInput.files[0];
if (!file) return;
uploadButton.disabled = true;
uploadButton.textContent = uploadButton.dataset.uploading;
const formData = new FormData();
formData.append('file', file);
try {
const response = await fetch('/images/upload', { method: 'POST', body: formData });
if (!response.ok) throw new Error('upload failed');
const result = await response.json();
idInput.value = result.filename;
setPreview(result.filename);
status.textContent = '{{ t(key="image-uploaded", lang=lang | default(value='sk')) }}';
} catch (_error) {
status.textContent = '{{ t(key="image-upload-error", lang=lang | default(value='sk')) }}';
} finally {
uploadButton.disabled = false;
uploadButton.textContent = uploadButton.dataset.ready;
}
});
})();
</script>
{% endblock content %}