fix of the json upload format

2026-08-04 21:03:08 +02:00 · 2026-08-04 20:54:03 +02:00 · 2026-08-04 20:44:15 +02:00 · 2026-08-04 20:42:06 +02:00 · 2026-08-03 23:55:30 +02:00
2 changed files with 136 additions and 210 deletions
@@ -11863,12 +11863,8 @@ def batch_upload_page():
    return render_template('upload_batch.html')


-from flask_wtf.csrf import CSRFProtect
-csrf = CSRFProtect(app)
-

@app.route('/upload_csv_batch', methods=['POST'])
-@csrf.exempt
 def upload_csv_batch():
    """
    Route for batch adding new items to the inventory via CSV.
@@ -11908,7 +11904,7 @@ def upload_csv_batch():

    # 2. CSV Einlesen und Validieren
    try:
-        df = pd.read_csv(csv_file)
+        df = pd.read_csv(csv_file, sep=',')
    except Exception as e:
        app.logger.error(f"[Upload {upload_session_id}] Fehler beim Lesen der CSV: {str(e)}")
        return jsonify({"success": False, "message": f"Fehler beim Lesen der CSV: {str(e)}"}), 400
@@ -3,162 +3,87 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Batch Upload - CSV & Bilder</title>
+    <title>Batch Upload</title>
+
+    <!-- CSRF-Token für JavaScript bereitstellen -->
+    <meta name="csrf-token" content="{{ session.get('_csrf_token', '') }}">
+
    <style>
-        :root {
-            --primary-color: #4a90e2;
-            --background-color: #f4f7f6;
-            --text-color: #333;
-            --border-radius: 8px;
-        }
-
-        body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background-color: var(--background-color);
-            color: var(--text-color);
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            min-height: 100vh;
-            margin: 0;
-            padding: 20px;
-            box-sizing: border-box;
-        }
-
-        .upload-container {
-            background: white;
-            padding: 2rem;
-            border-radius: var(--border-radius);
-            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-            width: 100%;
-            max-width: 500px;
-        }
-
-        h2 {
-            margin-top: 0;
-            color: var(--primary-color);
-            text-align: center;
-        }
-
-        .form-group {
-            margin-bottom: 1.5rem;
-        }
-
-        label {
-            display: block;
-            font-weight: 600;
-            margin-bottom: 0.5rem;
-        }
-
-        input[type="file"] {
-            display: block;
-            width: 100%;
-            padding: 0.5rem;
-            border: 1px dashed #ccc;
-            border-radius: var(--border-radius);
-            background: #fafafa;
-            cursor: pointer;
-            box-sizing: border-box;
-        }
-
-        .btn-submit {
-            width: 100%;
-            padding: 0.75rem;
-            background-color: var(--primary-color);
-            color: white;
-            border: none;
-            border-radius: var(--border-radius);
-            font-size: 1rem;
-            font-weight: 600;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-        }
-
-        .btn-submit:hover {
-            background-color: #357abd;
-        }
-
-        .btn-submit:disabled {
-            background-color: #a0c4e8;
-            cursor: not-allowed;
-        }
-
-        /* Fortschritts- und Log-Bereich */
-        #uploadProgress {
-            margin-top: 2rem;
-            display: none;
-        }
-
-        #progressText {
-            font-size: 1rem;
-            margin-bottom: 0.5rem;
-            color: var(--primary-color);
-            text-align: center;
-        }
-
-        progress {
-            width: 100%;
-            height: 20px;
-            border-radius: var(--border-radius);
-        }
-
-        #logList {
-            margin-top: 1rem;
-            padding: 10px;
-            font-size: 0.85rem;
-            color: #555;
-            max-height: 150px;
-            overflow-y: auto;
-            background: #fafafa;
-            border: 1px solid #ddd;
-            border-radius: var(--border-radius);
-            list-style-type: none;
-        }
-
-        #logList li {
-            margin-bottom: 5px;
-            padding-bottom: 5px;
-            border-bottom: 1px solid #eee;
-        }
-
-        #logList li:last-child {
-            border-bottom: none;
-            margin-bottom: 0;
-            padding-bottom: 0;
-        }
+        body { font-family: sans-serif; padding: 20px; background: #f4f7f6; }
+        .upload-container { background: white; padding: 20px; border-radius: 8px; max-width: 500px; margin: 0 auto; }
+        .form-group { margin-bottom: 15px; }
+        label { display: block; font-weight: bold; margin-bottom: 5px; }
+        input[type="file"] { width: 100%; padding: 8px; box-sizing: border-box; }
+        .btn-submit { width: 100%; padding: 10px; background: #4a90e2; color: white; border: none; border-radius: 4px; font-weight: bold; cursor: pointer; }
+        .btn-submit:disabled { background: #ccc; }
+        #uploadProgress { margin-top: 20px; display: none; }
+        progress { width: 100%; height: 20px; }
+        #logList { background: #fafafa; border: 1px solid #eee; padding: 10px; max-height: 150px; overflow-y: auto; font-size: 0.85em; list-style: none; }
    </style>
 </head>
 <body>

-    <div class="upload-container">
-        <h2>Inventar Batch Upload</h2>
+<div class="upload-container">
+    <h2>Inventar Batch Upload</h2>

-        <!-- ID auf "batchUploadForm" geändert, damit das JS es findet -->
-        <form id="batchUploadForm">
-            <div class="form-group">
-                <label for="csv_file">1. items.csv Datei auswählen</label>
-                <input type="file" id="csv_file" name="csv_file" accept=".csv" required>
-            </div>
-
-            <div class="form-group">
-                <label for="images">2. Bilder auswählen</label>
-                <input type="file" id="images" name="images" accept="image/*" multiple required>
-                <small style="color: #666; display: block; margin-top: 5px;">Du kannst mehrere Bilder markieren (Strg/Cmd gedrückt halten).</small>
-            </div>
-
-            <!-- ID auf "uploadBtn" geändert -->
-            <button type="submit" id="uploadBtn" class="btn-submit">Daten hochladen</button>
-        </form>
-
-        <!-- Fehlender Container für den Fortschrittsbalken und Logs hinzugefügt -->
-        <div id="uploadProgress">
-            <div id="progressText">Starte Upload...</div>
-            <progress id="progressBar" value="0" max="100"></progress>
-            <ul id="logList"></ul>
+    <form id="batchUploadForm">
+        <div class="form-group">
+            <label for="csv_file">1. items.csv auswählen</label>
+            <input type="file" id="csv_file" name="csv_file" accept=".csv" required>
        </div>
+
+        <div class="form-group">
+            <label for="images">2. Bilder auswählen</label>
+            <input type="file" id="images" name="images" accept="image/*" multiple required>
+        </div>
+
+        <button type="submit" id="uploadBtn" class="btn-submit">Daten hochladen</button>
+    </form>
+
+    <div id="uploadProgress">
+        <div id="progressText">Bereite Upload vor...</div>
+        <progress id="progressBar" value="0" max="100"></progress>
+        <ul id="logList"></ul>
    </div>
+</div>

 <script>
+// Robuster CSV-Parser, der Kommas innerhalb von Anführungszeichen ignoriert
+function parseCSVLine(text) {
+    const result = [];
+    let cur = '';
+    let inQuotes = false;
+    for (let i = 0; i < text.length; i++) {
+        const c = text[i];
+        if (c === '"' || c === "'") {
+            inQuotes = !inQuotes;
+        } else if (c === ',' && !inQuotes) {
+            result.push(cur.trim());
+            cur = '';
+        } else {
+            cur += c;
+        }
+    }
+    result.push(cur.trim());
+    return result;
+}
+
+// Extrahiert Bildnamen aus Einträgen wie "['bild1.jpg', 'bild2.jpg']" oder "bild1.jpg"
+function extractImageNames(cellValue) {
+    if (!cellValue) return [];
+    let raw = cellValue.replace(/^["']|["']$/g, '').trim();
+    if (raw.startsWith('[') && raw.endsWith(']')) {
+        try {
+            const jsonValid = raw.replace(/'/g, '"');
+            return JSON.parse(jsonValid);
+        } catch (e) {
+            const matches = raw.match(/['"]([^'"]+)['"]/g);
+            if (matches) return matches.map(m => m.replace(/['"]/g, ''));
+        }
+    }
+    return raw ? [raw] : [];
+}
+
 document.getElementById('batchUploadForm').addEventListener('submit', async function(e) {
    e.preventDefault();

@@ -170,6 +95,8 @@ document.getElementById('batchUploadForm').addEventListener('submit', async func
    const progressText = document.getElementById('progressText');
    const logList = document.getElementById('logList');

+    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
+
    if (!csvInput.files.length) {
        alert("Bitte wähle eine CSV-Datei aus.");
        return;
@@ -183,28 +110,32 @@ document.getElementById('batchUploadForm').addEventListener('submit', async func
        const li = document.createElement('li');
        li.textContent = msg;
        logList.appendChild(li);
-        logList.scrollTop = logList.scrollHeight; // Auto-scroll
+        logList.scrollTop = logList.scrollHeight;
    };

    const csvFile = csvInput.files[0];
    const allImages = Array.from(imageInput.files);
+
+    // Map für schnellen Dateinamen-Vergleich (ohne Pfadangabe)
+    const imageMap = new Map();
+    allImages.forEach(file => {
+        imageMap.set(file.name.toLowerCase(), file);
+    });
+
    const BATCH_SIZE = 50;

    try {
-        // 1. CSV-Datei lesen
        const csvText = await csvFile.text();
-
-        // 2. CSV in Zeilen aufteilen
-        let rows = csvText.split(/\r?\n/).filter(row => row.trim().length > 0);
+        let rows = csvText.split(/\r?\n/).filter(r => r.trim().length > 0);

        if (rows.length <= 1) {
            throw new Error("CSV-Datei ist leer oder enthält nur Kopfzeilen.");
        }

-        const header = rows[0];
-        let dataRows = rows.slice(1);
+        const headerRow = rows[0];
+        const dataRows = rows.slice(1);

-        // 3. Client-seitige Deduplizierung (Entfernt exakte Duplikat-Zeilen)
+        // 1. Client-Deduplizierung
        const uniqueRowsSet = new Set();
        const uniqueDataRows = [];
        let duplicateCount = 0;
@@ -218,13 +149,13 @@ document.getElementById('batchUploadForm').addEventListener('submit', async func
            }
        }

-        log(`${uniqueDataRows.length} einzigartige Einträge gefunden. ${duplicateCount} Duplikate entfernt.`);
+        log(`${uniqueDataRows.length} eindeutige Einträge. ${duplicateCount} Duplikate entfernt.`);

-        // Den Index der "Images" Spalte finden
-        const headers = header.split(',');
-        const imagesColIndex = headers.findIndex(h => h.trim().replace(/['"]/g, '') === 'Images');
+        // Spalten-Index von "Images" ermitteln
+        const headers = parseCSVLine(headerRow).map(h => h.replace(/['"]/g, '').trim());
+        const imagesColIndex = headers.findIndex(h => h.toLowerCase() === 'images');

-        // 4. In Batches (Häppchen) aufteilen
+        // 2. In Batches aufteilen
        const batches = [];
        for (let i = 0; i < uniqueDataRows.length; i += BATCH_SIZE) {
            batches.push(uniqueDataRows.slice(i, i + BATCH_SIZE));
@@ -233,74 +164,73 @@ document.getElementById('batchUploadForm').addEventListener('submit', async func
        progressBar.max = batches.length;
        progressBar.value = 0;

-        // 5. Batches nacheinander hochladen
+        // 3. Sequenzieller Upload
        for (let b = 0; b < batches.length; b++) {
            const batchRows = batches[b];
            progressText.textContent = `Lade Batch ${b + 1} von ${batches.length} hoch...`;
-            log(`Bereite Batch ${b + 1} vor (${batchRows.length} Artikel)...`);

-            // CSV für diesen Batch neu zusammensetzen
-            const batchCsvText = [header, ...batchRows].join('\n');
-            const batchCsvBlob = new Blob([batchCsvText], { type: 'text/csv' });
+            // Zuordnung der benötigten Bilder für diesen Batch
+            const requiredImagesForBatch = new Set();

-            // Benötigte Bilder für diesen Batch extrahieren
-            const requiredImageNames = new Set();
            if (imagesColIndex !== -1) {
-                batchRows.forEach(row => {
-                    const cols = row.split(',');
+                batchRows.forEach(rowStr => {
+                    const cols = parseCSVLine(rowStr);
                    if (cols[imagesColIndex]) {
-                        try {
-                            let imgStr = cols[imagesColIndex].trim().replace(/^"|"$/g, '').replace(/'/g, '"');
-                            if (imgStr.startsWith('[') && imgStr.endsWith(']')) {
-                                const parsedImages = JSON.parse(imgStr);
-                                parsedImages.forEach(img => requiredImageNames.add(img));
+                        const imgNames = extractImageNames(cols[imagesColIndex]);
+                        imgNames.forEach(name => {
+                            const fileMatch = imageMap.get(name.toLowerCase());
+                            if (fileMatch) {
+                                requiredImagesForBatch.add(fileMatch);
                            }
-                        } catch (err) {
-                            console.warn("Konnte Bild-Array nicht parsen in Zeile:", row);
-                        }
+                        });
                    }
                });
            }

-            // Bilder auf die für diesen Batch benötigten filtern
-            const batchImages = allImages.filter(img => requiredImageNames.has(img.name));
+            // CSV für diesen Batch erstellen
+            const batchCsvText = [headerRow, ...batchRows].join('\n');
+            const batchCsvBlob = new Blob([batchCsvText], { type: 'text/csv' });

-            // FormData zusammenbauen
            const formData = new FormData();
-            formData.append('csv_file', batchCsvBlob, `batch_${b+1}.csv`);
-            batchImages.forEach(img => {
-                formData.append('images', img);
-            });
+            formData.append('csv_file', batchCsvBlob, `batch_${b + 1}.csv`);

-            // An Server senden
-            try {
-                const response = await fetch('/upload_csv_batch', {
-                    method: 'POST',
-                    body: formData
-                });
-
-                const result = await response.json();
-
-                if (!response.ok || !result.success) {
-                    throw new Error(result.message || `Server antwortete mit Status ${response.status}`);
-                }
-
-                log(`Batch ${b + 1} erfolgreich: ${result.message}`);
-            } catch (batchErr) {
-                log(`Fehler in Batch ${b + 1}: ${batchErr.message}`);
-                alert(`Upload wurde bei Batch ${b + 1} aufgrund eines Fehlers abgebrochen. Prüfe die Logs.`);
-                break; // Stoppt weitere Uploads, wenn einer fehlschlägt
+            // CSRF-Token im Form-Field übergeben
+            if (csrfToken) {
+                formData.append('csrf_token', csrfToken);
            }

+            // Zugehörige Bilder anfügen
+            requiredImagesForBatch.forEach(imgFile => {
+                formData.append('images', imgFile);
+            });
+
+            log(`Batch ${b + 1}: ${batchRows.length} Items & ${requiredImagesForBatch.size} zugehörige Bilder.`);
+
+            // Request mit CSRF-Header ausführen
+            const response = await fetch('/upload_csv_batch', {
+                method: 'POST',
+                body: formData,
+                headers: {
+                    'X-CSRFToken': csrfToken || ''
+                }
+            });
+
+            const result = await response.json();
+
+            if (!response.ok || !result.success) {
+                throw new Error(result.message || `Server-Fehler ${response.status}`);
+            }
+
+            log(`Batch ${b + 1} abgeschlossen: ${result.message}`);
            progressBar.value = b + 1;
        }

-        progressText.textContent = "Upload-Vorgang abgeschlossen!";
+        progressText.textContent = "Upload erfolgreich beendet!";
        uploadBtn.disabled = false;

-    } catch (error) {
-        alert("Fehler bei der Verarbeitung des Uploads: " + error.message);
-        log("Fehler: " + error.message);
+    } catch (err) {
+        alert("Upload abgebrochen: " + err.message);
+        log("Fehler: " + err.message);
        uploadBtn.disabled = false;
    }
 });
Author	SHA1	Message	Date
Aiirondev_dev	5b95c5202e	fix of the json upload format	2026-08-04 21:03:08 +02:00
Aiirondev_dev	51c17d11f2	fix of the json upload format	2026-08-04 20:54:03 +02:00
Aiirondev_dev	91ddc6e864	fix of the json upload format	2026-08-04 20:44:15 +02:00
Aiirondev_dev	88f124c991	fix of the json upload format	2026-08-04 20:42:06 +02:00
Aiirondev_dev	33c65f21b6	fix of the json upload format	2026-08-03 23:55:30 +02:00