Dokumentit: drag & drop -tiedostolataus useille tiedostoille
- Drop zone dokumenttilistan alaosaan (raahaa tai klikkaa) - Multi-file upload: luo dokumentit ja lataa tiedostot automaattisesti - Edistymispalkki näyttää latauksen tilanteen - Kansioiden raahaus: luo automaattisesti alikansio + tiedostot - Kategoria-tunnistus tiedostopäätteen mukaan (kuva/muu) - Multi-file input fallback perinteiselle tiedostovalinnalle Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
195
script.js
195
script.js
@@ -5563,6 +5563,201 @@ document.getElementById('doc-edit-form')?.addEventListener('submit', async (e) =
|
||||
} catch (e) { alert('Tallennus epäonnistui: ' + e.message); }
|
||||
});
|
||||
|
||||
// ---- Drag & Drop multi-upload ----
|
||||
|
||||
function detectDocCategory(filename) {
|
||||
const ext = (filename.split('.').pop() || '').toLowerCase();
|
||||
if (['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg', 'bmp'].includes(ext)) return 'kuva';
|
||||
return 'muu';
|
||||
}
|
||||
|
||||
// Käy läpi kansiorakenne webkitGetAsEntry:n avulla
|
||||
function traverseFileTree(entry, path) {
|
||||
return new Promise((resolve) => {
|
||||
if (entry.isFile) {
|
||||
entry.file(file => {
|
||||
file._relativePath = path + file.name;
|
||||
resolve([file]);
|
||||
});
|
||||
} else if (entry.isDirectory) {
|
||||
const reader = entry.createReader();
|
||||
reader.readEntries(async (entries) => {
|
||||
let files = [];
|
||||
for (const e of entries) {
|
||||
const sub = await traverseFileTree(e, path + entry.name + '/');
|
||||
files = files.concat(sub);
|
||||
}
|
||||
// Merkitään kansion nimi
|
||||
if (files.length > 0) {
|
||||
files._folderName = entry.name;
|
||||
}
|
||||
resolve(files);
|
||||
});
|
||||
} else {
|
||||
resolve([]);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function handleDocFileDrop(dataTransfer) {
|
||||
const progressEl = document.getElementById('doc-upload-progress');
|
||||
const fillEl = document.getElementById('doc-upload-fill');
|
||||
const statusEl = document.getElementById('doc-upload-status');
|
||||
|
||||
// Kerää tiedostot — tarkista kansiot webkitGetAsEntry:llä
|
||||
let allFiles = [];
|
||||
let folderName = null;
|
||||
const items = dataTransfer.items;
|
||||
|
||||
if (items && items.length > 0 && items[0].webkitGetAsEntry) {
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
const entry = items[i].webkitGetAsEntry();
|
||||
if (entry) {
|
||||
if (entry.isDirectory) {
|
||||
folderName = entry.name;
|
||||
const files = await traverseFileTree(entry, '');
|
||||
allFiles = allFiles.concat(files);
|
||||
} else {
|
||||
const files = await traverseFileTree(entry, '');
|
||||
allFiles = allFiles.concat(files);
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// Fallback: tavallinen files-lista
|
||||
allFiles = Array.from(dataTransfer.files || []);
|
||||
}
|
||||
|
||||
if (allFiles.length === 0) return;
|
||||
|
||||
// Näytä edistymispalkki
|
||||
progressEl.style.display = '';
|
||||
fillEl.style.width = '0%';
|
||||
statusEl.textContent = `Ladataan 0 / ${allFiles.length} tiedostoa...`;
|
||||
|
||||
// Jos raahattiin kansio → luo kansio ensin
|
||||
let targetFolderId = currentDocFolderId || null;
|
||||
if (folderName) {
|
||||
try {
|
||||
const folder = await apiCall('document_folder_save', 'POST', {
|
||||
name: folderName,
|
||||
parent_id: currentDocFolderId || null,
|
||||
customer_id: currentDocCustomerId || null
|
||||
});
|
||||
targetFolderId = folder.id;
|
||||
} catch (e) {
|
||||
console.error('Kansion luonti epäonnistui:', e);
|
||||
}
|
||||
}
|
||||
|
||||
let success = 0;
|
||||
let failed = 0;
|
||||
for (let i = 0; i < allFiles.length; i++) {
|
||||
const file = allFiles[i];
|
||||
const filename = file.name;
|
||||
const pct = Math.round(((i) / allFiles.length) * 100);
|
||||
fillEl.style.width = pct + '%';
|
||||
statusEl.textContent = `Ladataan ${i + 1} / ${allFiles.length}: ${filename}`;
|
||||
|
||||
try {
|
||||
// 1. Luo dokumentti
|
||||
const saved = await apiCall('document_save', 'POST', {
|
||||
title: filename.replace(/\.[^.]+$/, ''),
|
||||
category: detectDocCategory(filename),
|
||||
customer_id: currentDocCustomerId || null,
|
||||
folder_id: targetFolderId,
|
||||
max_versions: 10,
|
||||
created_by: currentUser?.username || ''
|
||||
});
|
||||
|
||||
// 2. Lataa tiedosto
|
||||
const fd = new FormData();
|
||||
fd.append('document_id', saved.id);
|
||||
fd.append('file', file);
|
||||
fd.append('change_notes', 'Ensimmäinen versio');
|
||||
const res = await fetch(`${API}?action=document_upload`, {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
body: fd
|
||||
});
|
||||
if (!res.ok) {
|
||||
const errData = await res.json().catch(() => ({}));
|
||||
throw new Error(errData.error || 'Upload failed');
|
||||
}
|
||||
success++;
|
||||
} catch (e) {
|
||||
console.error(`Tiedoston "${filename}" lataus epäonnistui:`, e);
|
||||
failed++;
|
||||
}
|
||||
}
|
||||
|
||||
// Valmis
|
||||
fillEl.style.width = '100%';
|
||||
const failText = failed > 0 ? ` (${failed} epäonnistui)` : '';
|
||||
statusEl.textContent = `✓ ${success} tiedostoa ladattu${failText}`;
|
||||
|
||||
// Päivitä lista
|
||||
await loadDocuments();
|
||||
if (folderName && targetFolderId) {
|
||||
navigateDocFolder(targetFolderId);
|
||||
}
|
||||
|
||||
// Piilota edistymispalkki hetken kuluttua
|
||||
setTimeout(() => {
|
||||
progressEl.style.display = 'none';
|
||||
fillEl.style.width = '0%';
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// Drop zone handlerit
|
||||
const docDropzone = document.getElementById('doc-dropzone');
|
||||
if (docDropzone) {
|
||||
let dragCounter = 0;
|
||||
|
||||
docDropzone.addEventListener('dragenter', (e) => {
|
||||
e.preventDefault();
|
||||
dragCounter++;
|
||||
docDropzone.classList.add('active');
|
||||
});
|
||||
|
||||
docDropzone.addEventListener('dragover', (e) => {
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = 'copy';
|
||||
});
|
||||
|
||||
docDropzone.addEventListener('dragleave', (e) => {
|
||||
e.preventDefault();
|
||||
dragCounter--;
|
||||
if (dragCounter <= 0) {
|
||||
dragCounter = 0;
|
||||
docDropzone.classList.remove('active');
|
||||
}
|
||||
});
|
||||
|
||||
docDropzone.addEventListener('drop', async (e) => {
|
||||
e.preventDefault();
|
||||
dragCounter = 0;
|
||||
docDropzone.classList.remove('active');
|
||||
await handleDocFileDrop(e.dataTransfer);
|
||||
});
|
||||
|
||||
// Klikkaa drop zonea → avaa file dialog
|
||||
docDropzone.addEventListener('click', (e) => {
|
||||
if (e.target.tagName !== 'LABEL' && e.target.tagName !== 'INPUT') {
|
||||
document.getElementById('doc-multi-file')?.click();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Multi-file input fallback
|
||||
document.getElementById('doc-multi-file')?.addEventListener('change', async (e) => {
|
||||
if (e.target.files.length > 0) {
|
||||
// Luo pseudo-DataTransfer jossa on files
|
||||
await handleDocFileDrop({ files: e.target.files, items: null });
|
||||
e.target.value = '';
|
||||
}
|
||||
});
|
||||
|
||||
// ==================== LAITETILAT ====================
|
||||
|
||||
let allLaitetilat = [];
|
||||
|
||||
Reference in New Issue
Block a user