File size: 2,837 Bytes
d95ca92 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | document.addEventListener('DOMContentLoaded', () => {
const uploadArea = document.getElementById('upload-area');
const fileInput = document.getElementById('file-input');
const preview = document.getElementById('preview');
const imagePreview = document.getElementById('image-preview');
const result = document.getElementById('result');
const caption = document.getElementById('caption');
const loading = document.getElementById('loading');
// Kliknutí na oblast nahrávání otevře dialog pro výběr souboru
uploadArea.addEventListener('click', () => {
fileInput.click();
});
// Přetáhnutí souboru
uploadArea.addEventListener('dragover', (e) => {
e.preventDefault();
uploadArea.classList.add('bg-gray-100');
});
uploadArea.addEventListener('dragleave', () => {
uploadArea.classList.remove('bg-gray-100');
});
uploadArea.addEventListener('drop', (e) => {
e.preventDefault();
uploadArea.classList.remove('bg-gray-100');
if (e.dataTransfer.files.length) {
handleFile(e.dataTransfer.files[0]);
}
});
// Výběr souboru pomocí dialogu
fileInput.addEventListener('change', () => {
if (fileInput.files.length) {
handleFile(fileInput.files[0]);
}
});
// Funkce pro zpracování souboru
function handleFile(file) {
if (!file.type.match('image.*')) {
alert('Prosím, vyberte obrázek.');
return;
}
// Zobrazit náhled obrázku
const reader = new FileReader();
reader.onload = (e) => {
imagePreview.src = e.target.result;
preview.classList.remove('hidden');
result.classList.add('hidden');
loading.classList.add('hidden');
};
reader.readAsDataURL(file);
// Odeslat obrázek na server
uploadImage(file);
}
// Funkce pro odeslání obrázku na server
async function uploadImage(file) {
const formData = new FormData();
formData.append('image', file);
loading.classList.remove('hidden');
result.classList.add('hidden');
try {
const response = await fetch('/upload', {
method: 'POST',
body: formData
});
if (!response.ok) {
throw new Error('Chyba při zpracování obrázku');
}
const data = await response.json();
caption.textContent = data.caption;
result.classList.remove('hidden');
} catch (error) {
console.error('Chyba:', error);
alert('Chyba při zpracování obrázku. Zkuste to znovu.');
} finally {
loading.classList.add('hidden');
}
}
}); |