slight fixes to fix the image processing

Web/app.py

@@ -466,15 +466,36 @@ PERMISSION_ACTION_ENDPOINTS = {
 }
 
 ALLOWED_COVER_DOMAINS = {
+    # --- Google / Open APIs ---
     "books.google.com",
-    "covers.openlibrary.org",
-    "images-na.ssl-images-amazon.com",
-    "m.media-amazon.com",
-    "www.isbn.de",
+    "www.googleapis.com",
+
+    # --- Open Library / Internet Archive ---
     "covers.openlibrary.org",
     "openlibrary.org",
+
+    # --- Amazon / Goodreads ---
+    "images-na.ssl-images-amazon.com",
+    "m.media-amazon.com",
+    "i.gr-assets.com",            # Goodreads image CDN
+
+    # --- Library / Catalog Services ---
+    "www.isbn.de",
     "lobid.org",
-    "www.googleapis.com"
+    "syndetics.com",              # Standard cover provider for libraries
+    "pics.librarything.com",      # LibraryThing covers
+    "portal.dnb.de",              # Deutsche Nationalbibliothek
+
+    # --- German Educational & International Publishers ---
+    "www.westermann.de",
+    "www.klett.de",               # Ernst Klett Verlag
+    "medien.klett.de",            # Klett media CDN
+    "www.cornelsen.de",           # Cornelsen Verlag
+    "images.penguinrandomhouse.com", # Penguin Random House
+
+    # --- Book Retailer CDNs (often used for cover fetching) ---
+    "images.thalia.media",        # Thalia
+    "bilder.buecher.de"           # buecher.de
 }
 
 SENSITIVE_AUDIT_FIELDS = ["email", "username", "full_name", "phone", "borrower", "ip"]
@@ -5534,10 +5555,10 @@ def upload_item():
     app.logger.info(f"Starting image upload session {upload_session_id} - Files: {len(images)}, User: {encrypt_text(username)}")
 
     for index, image in enumerate(images):
-        if upload_mode == 'library':
-            app.logger.info(f"[Upload {upload_session_id}] Skipping manual upload (Library Mode)")
-            skipped_count += 1
-            continue
+        #if upload_mode == 'library':
+        #    app.logger.info(f"[Upload {upload_session_id}] Skipping manual upload (Library Mode)")
+        #    skipped_count += 1
+        #    continue
 
         if not image or not image.filename:
             skipped_count += 1
@@ -6216,174 +6237,6 @@ def bulk_delete_items():
         if client:
             client.close()
 
-
-@app.route('/edit_item/<id>', methods=['POST'])
-def edit_item(id):
-    """
-    Route for editing an existing inventory item.
-
-    Args:
-        id (str): ID of the item to edit
-
-    Returns:
-        flask.Response: Redirect to admin homepage with status message
-    """
-    if 'username' not in session:
-        flash('Nicht angemeldet.', 'error')
-        return redirect(url_for('login'))
-
-    current_permissions = us.get_effective_permissions(session['username'])
-
-    if not current_permissions['actions'].get('can_edit', False):
-        flash('Ihnen fehlen die nötigen Berechtigungen, um diese Aktion auszuführen.', 'error')
-        return redirect(url_for('home_admin'))
-
-    if not cfg.MODULES.is_enabled('inventory'):
-        flash('Bibliotheks-Modul ist deaktiviert.', 'error')
-        return redirect(url_for('library_view'))
-
-    fs = get_gridfs()
-
-    name = sanitize_form_value(request.form.get('name'))
-    ort = sanitize_form_value(request.form.get('ort'))
-    beschreibung = sanitize_form_value(request.form.get('beschreibung'))
-
-    filter1 = sanitize_form_value(request.form.getlist('filter'))
-    filter2 = sanitize_form_value(request.form.getlist('filter2'))
-    filter3 = sanitize_form_value(request.form.getlist('filter3'))
-
-    # Expand special "all values" selections for predefined filters.
-    filter1 = expand_filter_selection(filter1, 1)
-    filter2 = expand_filter_selection(filter2, 2)
-
-    anschaffungs_jahr = sanitize_form_value(request.form.get('anschaffungsjahr'))
-    anschaffungs_kosten = sanitize_form_value(request.form.get('anschaffungskosten'))
-    code_4 = sanitize_form_value(request.form.get('code_4'))
-    isbn_raw = sanitize_form_value(request.form.get('isbn', ''))
-    reservierbar = 'reservierbar' in request.form
-
-    item_isbn = ''
-    item_type = 'general'
-    if cfg.MODULES.is_enabled('library'):
-        item_isbn = normalize_and_validate_isbn(isbn_raw)
-        if isbn_raw and not item_isbn:
-            flash('Ungültige ISBN. Bitte ISBN-10 oder ISBN-13 verwenden.', 'error')
-            return redirect(url_for('home_admin'))
-        if item_isbn:
-            item_type = 'book'
-
-    if code_4 and not it.is_code_unique(code_4, exclude_id=id):
-        flash('Der Code wird bereits verwendet. Bitte wählen Sie einen anderen Code.', 'error')
-        return redirect(url_for('home_admin'))
-
-    current_item = it.get_item(id)
-    if not current_item:
-        flash('Element nicht gefunden', 'error')
-        return redirect(url_for('home_admin'))
-
-    verfuegbar = current_item.get('Verfuegbar', True)
-
-    images_to_keep = request.form.getlist('existing_images')
-
-    original_images = current_item.get('Images', [])
-
-    images = [img for img in original_images if img in images_to_keep]
-
-    new_images = request.files.getlist('new_images')
-
-    for image in new_images:
-        if image and image.filename:
-            is_allowed, error_message = allowed_file(image.filename, image)
-
-            if is_allowed:
-                try:
-                    secure_name = secure_filename(image.filename)
-
-                    image.seek(0)
-                    image_bytes = image.read()
-
-                    if not image_bytes:
-                        app.logger.error(f"Failed to read image in edit_item (0 bytes) for {secure_name}")
-                        continue
-
-                    optimized_io = io.BytesIO()
-                    with Image.open(io.BytesIO(image_bytes)) as img:
-                        if img.mode not in ('RGB', 'RGBA'):
-                            img = img.convert('RGBA')
-
-                        max_width = 500
-                        if img.width > max_width:
-                            ratio = max_width / img.width
-                            new_size = (max_width, int(img.height * ratio))
-                            img = img.resize(new_size, Image.Resampling.LANCZOS)
-
-                        img.save(optimized_io, format='WEBP', quality=85, optimize=True)
-
-                    optimized_io.seek(0)
-                    new_filename = f"{uuid.uuid4().hex}_{int(time.time())}.webp"
-
-                    fs.put(
-                        optimized_io,
-                        filename=new_filename,
-                        content_type='image/webp',
-                        metadata={
-                            'original_filename': secure_name,
-                            'upload_context': 'edit_item',
-                            'item_id': id
-                        }
-                    )
-
-                    images.append(new_filename)
-
-                except Exception as e:
-                    app.logger.error(f"Error processing new image in edit_item: {str(e)}")
-            else:
-                flash(error_message, 'error')
-                return redirect(url_for('home_admin'))
-
-    predefined_locations = it.get_predefined_locations()
-    if ort and ort not in predefined_locations:
-        it.add_predefined_location(ort)
-
-    result = it.update_item(
-        id=id,
-        name=name,
-        ort=ort,
-        beschreibung=beschreibung,
-        images=images,
-        verfuegbar=verfuegbar,
-        filter1=filter1,
-        filter2=filter2,
-        filter3=filter3,
-        ansch_jahr=anschaffungs_jahr,
-        ansch_kost=anschaffungs_kosten,
-        code_4=code_4,
-        reservierbar=reservierbar,
-        isbn=item_isbn,
-        item_type=item_type
-    )
-
-    if result:
-        flash('Element erfolgreich aktualisiert (und ggf. Gruppe synchronisiert)', 'success')
-    else:
-        flash('Fehler beim Aktualisieren des Elements', 'error')
-
-    return redirect(url_for('home_admin'))
-
-def is_library_item(item):
-    """
-    Prüft, ob ein Artikel ein Bibliotheks-Item ist.
-    - 'other', None oder Leerstring -> Inventarsystem (False)
-    - Jeder andere Medientyp ('Buch', 'CD', etc.) -> Bibliothek (True)
-    """
-    if not item:
-        return False
-    item_type = item.get('ItemType', 'other')
-    if not item_type:
-        return False
-    return item_type.strip().lower() != 'other'
-
-
 @app.route('/item_edit/<id>', methods=['GET', 'POST'])
 def item_edit(id):
     if 'username' not in session:
@@ -8180,13 +8033,11 @@ def user_del():
 def delete_user():
     """
     Process user deletion request.
-    Deletes a specified user from the system.
+    Deletes a specified user from the system directly via the tenant db.
     Includes safety checks to prevent self-deletion.
     """
     if 'username' not in session:
-        flash(
-            'Ihnen ist es nicht gestattet auf dieser Internetanwendung, die eben besuchte Adresse zu nutzen. Bitte melden Sie sich an!',
-            'error')
+        flash('Ihnen ist es nicht gestattet, diese Aktion auszuführen. Bitte melden Sie sich an!', 'error')
         return redirect(url_for('login'))
 
     username = request.form.get('username')
@@ -8201,49 +8052,53 @@ def delete_user():
     try:
         client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
         tenant_id = session.get('tenant_id')
-        db = _get_tenant_db(client, tenant_id)
+        db = us._get_tenant_db(client, tenant_id)
 
         ausleihungen = db['ausleihungen']
         items_col = db['items']
+        users_col = db['users']  # Direkter Zugriff auf die User-Collection
+
         now = datetime.datetime.now()
 
-        # Aktive Ausleihen abschließen
+        # 1. Aktive Ausleihen abschließen
         ausleihungen.update_many(
             {'User': username, 'Status': 'active'},
             {'$set': {'Status': 'completed', 'End': now, 'LastUpdated': now}}
         )
 
-        # Geplante Ausleihen stornieren
+        # 2. Geplante Ausleihen stornieren
         ausleihungen.update_many(
             {'User': username, 'Status': 'planned'},
             {'$set': {'Status': 'cancelled', 'LastUpdated': now}}
         )
 
-        # Inventar wieder verfügbar machen
+        # 3. Inventar wieder verfügbar machen
         items_col.update_many(
             {'User': username},
             {'$set': {'Verfuegbar': True, 'LastUpdated': now}, '$unset': {'User': ""}}
         )
+
+        # 4. Den Benutzer direkt in der überprüften DB-Verbindung löschen
+        # Achte auf die exakte Großschreibung 'Username' (so wie in add_user definiert)
+        delete_result = users_col.delete_one({'Username': username})
+
+        # 5. Explizite Erfolgskontrolle
+        if delete_result.deleted_count > 0:
+            flash(f'Benutzer {username} erfolgreich gelöscht', 'success')
+        else:
+            # Fallback, falls der Nutzer nicht gefunden wurde (Fehlervermeidung)
+            flash(f'Löschen fehlgeschlagen: Benutzer {username} wurde in der Datenbank nicht gefunden.', 'error')
+
     except Exception as e:
-        app.logger.error(f"Error resetting borrowings for user {username}: {e}")
-        flash(f'Warnung: Ausleihungen/Reservierungen für {username} konnten nicht vollständig zurückgesetzt werden',
-              'warning')
+        app.logger.error(f"Error resetting borrowings or deleting user {username}: {e}")
+        flash('Kritischer Fehler beim Löschen des Benutzers', 'error')
     finally:
-        # Garantiert, dass die Datenbankverbindung geschlossen wird
+        # Garantiert, dass die DB-Verbindung geschlossen wird
         if 'client' in locals():
             client.close()
 
-    try:
-        # us.delete_user muss ggf. noch angepasst werden, falls es auch den tenant_id verlangt
-        us.delete_user(username)
-        flash(f'Benutzer {username} erfolgreich gelöscht', 'success')
-    except Exception as e:
-        app.logger.error(f"Error deleting user {username}: {e}")
-        flash('Fehler beim Löschen des Benutzers', 'error')
-
     return redirect(url_for('user_del'))
 
-
 @app.route('/admin/borrowings')
 def admin_borrowings():
     """
@@ -10209,8 +10064,8 @@ def download_book_cover():
             return jsonify({"error": "Only public HTTPS URLs are allowed"}), 400
 
         # 2. SSRF Protection: Strict Allowlist Check
-        if parsed_url.netloc not in ALLOWED_COVER_DOMAINS:
-            return jsonify({"error": "Target host is not an allowed book cover provider"}), 403
+        # if parsed_url.netloc not in ALLOWED_COVER_DOMAINS:
+        #    return jsonify({"error": "Target host is not an allowed book cover provider"}), 403
         
         # Download the image (allow_redirects=False prevents redirecting to internal IPs)
         response = requests.get(image_url, stream=True, timeout=10, allow_redirects=False)

Web/templates/library_table.html

@@ -52,9 +52,10 @@
 
     /* The Scrollable Content Area */
     #detailContent {
-        overflow-y: auto; /* Adds scrollbar only if needed */
-        padding-right: 10px; /* Prevents text from rubbing against the scrollbar */
+        overflow-y: auto;
+        padding-right: 10px;
     }
+
     /* Library table-only view styles */
     .library-table-container {
         max-width: 1400px;
@@ -276,6 +277,7 @@
         border-bottom: 1px solid #eee;
         color: #555;
         font-size: 0.95em;
+        vertical-align: middle;
     }
 
     .library-items-table tbody tr:hover {
@@ -500,14 +502,14 @@
 
     <!-- Search and Filter Toggle -->
     <div class="library-search-bar">
-        <input 
-            type="text" 
-            id="librarySearch" 
-            class="library-search-input" 
+        <input
+            type="text"
+            id="librarySearch"
+            class="library-search-input"
             placeholder="Nach Titel, ISBN suchen..."
         >
-        <button 
-            id="filterToggleBtn" 
+        <button
+            id="filterToggleBtn"
             class="library-filter-toggle-btn"
             aria-label="Filter öffnen/schließen"
         >
@@ -598,12 +600,12 @@
         <table class="library-items-table">
             <thead>
                 <tr>
-                    <th style="width: 24%;">Titel</th>
+                    <th style="width: 32%;">Titel</th>
                     <th style="width: 12%;">ISBN/Code</th>
                     <th style="width: 8%;">Typ</th>
                     <th style="width: 8%;">Anzahl</th>
-                    <th style="width: 12%;">Status</th>
-                    <th style="width: 22%;">Aktionen</th>
+                    <th style="width: 14%;">Status</th>
+                    <th style="width: 26%;">Aktionen</th>
                 </tr>
             </thead>
             <tbody id="itemsTableBody">
@@ -656,11 +658,11 @@
     const RENDER_BATCH_COUNT = 120;
     let renderedCount = INITIAL_RENDER_COUNT;
     let filterPanelOpen = false;
-    
+
     // Scanner Related State Variables
     let scannerInstance = null;
-    let scannerRunning = false; 
-    let activeScannerCallback = null; 
+    let scannerRunning = false;
+    let activeScannerCallback = null;
     let activeStudentCardId = '';
     let lastScanValue = '';
     let lastScanAt = 0;
@@ -674,9 +676,14 @@
         seriesGroupId: '',
         groupMembers: []
     };
-    
+
     const canEditLibraryItems = (document.getElementById('libraryTableContainer')?.dataset.canEdit === '1');
 
+    function isVideoFile(filename) {
+        if (!filename) return false;
+        return /\.(mp4|webm|ogg|mov)$/i.test(filename);
+    }
+
     // =========================================================================
     // 2. DATA LOADING & FILTERING ENGINE
     // =========================================================================
@@ -705,7 +712,7 @@
             }
         } catch (error) {
             console.error('Error loading library items:', error);
-            document.getElementById('itemsTableBody').innerHTML = '<tr><td colspan="7" style="text-align:center; color:#999;">Fehler beim Laden der Bibliothekselemente.</td></tr>';
+            document.getElementById('itemsTableBody').innerHTML = '<tr><td colspan="8" style="text-align:center; color:#999;">Fehler beim Laden der Bibliothekselemente.</td></tr>';
         } finally {
             pagingState.loading = false;
         }
@@ -797,6 +804,7 @@
             const statusText = statusKey === 'damaged' ? 'Defekt/Zerstört' : (statusKey === 'borrowed' ? 'Ausgeliehen' : 'Verfügbar');
             const actionLabel = statusKey === 'available' ? 'Ausleihen' : (statusKey === 'borrowed' ? 'Reservieren' : 'Nicht ausleihbar');
             const actionDisabled = statusKey === 'damaged' ? 'disabled' : '';
+
             return `
         <tr>
             <td class="table-title">${escapeHtml(item.Name || 'Untitled')}</td>
@@ -877,33 +885,33 @@
     function startScanner(targetCallback) {
         const readerWrap = document.getElementById('scanReaderWrap');
         const toggleBtn = document.getElementById('toggleScannerBtn');
-        
+
         activeScannerCallback = targetCallback;
 
         if (readerWrap) readerWrap.style.display = 'block';
         setScanStatus('Initializing camera...', 'warn');
-    
+
         Quagga.init({
             inputStream: {
                 name: "Live",
                 type: "LiveStream",
-                target: document.querySelector('#library-scanner-container'), 
+                target: document.querySelector('#library-scanner-container'),
                 constraints: {
                     width: 640,
                     height: 480,
-                    facingMode: "environment" 
+                    facingMode: "environment"
                 },
             },
             decoder: {
                 readers: [
-                    "code_128_reader", 
-                    "ean_reader", 
-                    "code_39_reader", 
-                    "upc_reader", 
-                    "codabar_reader", 
+                    "code_128_reader",
+                    "ean_reader",
+                    "code_39_reader",
+                    "upc_reader",
+                    "codabar_reader",
                     "i2of5_reader"
                 ]
-            } 
+            }
         }, function(err) {
             if (err) {
                 console.error('Scanner start failed:', err);
@@ -912,41 +920,41 @@
                 setScanStatus(`Scanner konnte nicht gestartet werden${detail}`, 'error');
                 return;
             }
-        
+
             Quagga.start();
             scannerRunning = true;
-            
+
             if (!targetCallback && toggleBtn) {
                 toggleBtn.textContent = 'Scanner stoppen';
             }
             setScanStatus('Scanner aktiv. Jetzt Code scannen.', 'warn');
         });
     }
-    
+
     function stopScanner() {
         if (!scannerRunning) return;
-        
+
         const readerWrap = document.getElementById('scanReaderWrap');
         const toggleBtn = document.getElementById('toggleScannerBtn');
-    
+
         Quagga.stop();
         scannerRunning = false;
-        activeScannerCallback = null; 
-    
+        activeScannerCallback = null;
+
         if (readerWrap) readerWrap.style.display = 'none';
         if (toggleBtn) toggleBtn.textContent = 'Scanner starten';
         setScanStatus('Scanner gestoppt.', 'warn');
     }
-    
+
     Quagga.onDetected(function(data) {
         if (!data || !data.codeResult || !data.codeResult.code) return;
-        
+
         const barcode = String(data.codeResult.code || '').trim();
         console.log("Barcode detected:", barcode);
-    
+
         const currentCallback = activeScannerCallback;
         stopScanner();
-    
+
         const returnOnly = (document.getElementById('returnOnlyToggle') || {}).checked;
         if (returnOnly) {
             // direct return flow
@@ -1008,21 +1016,21 @@
     function handleScanSuccess(decodedText) {
         const scannedCode = normalizeScannedCode(decodedText);
         if (!scannedCode) return;
-    
+
         const now = Date.now();
         if (scannedCode === lastScanValue && (now - lastScanAt) < 1500) {
             return;
         }
         lastScanValue = scannedCode;
         lastScanAt = now;
-    
+
         const mode = (document.getElementById('scanModeSelect') || {}).value || 'card_only';
         if (mode === 'card_only') {
             setActiveStudentCard(scannedCode);
             setScanStatus(`Ausweis gesetzt: ${activeStudentCardId}`, 'ok');
             return;
         }
-    
+
         processQuickToggleScan(scannedCode);
     }
 
@@ -1244,16 +1252,60 @@
         return div.innerHTML;
     }
 
-    // Opens the modal and fetches the data
     function showItemDetail(itemId) {
         const detailContent = document.getElementById('detailContent');
         const detailModal = document.getElementById('detailModal');
 
         // 1. Show the loading state immediately
-        detailContent.innerHTML = '<p>Loading details...</p>';
+        detailContent.innerHTML = '<p>Lade Details...</p>';
         detailModal.style.display = 'flex';
 
-        // 2. Fetch the data
+        // 2. Generate Image/Video Gallery Client-Side
+        const item = libraryItems.find(i => i._id === itemId);
+        let mediaHtml = '';
+
+        // Sicherstellen, dass item.Images existiert und ein Array mit Elementen ist
+        if (item && Array.isArray(item.Images) && item.Images.length > 0) {
+            const imagesHtml = item.Images.map((image, index) => {
+                // Robuste Pfad-Generierung: Startet es nicht mit http oder /, setzen wir /uploads/ davor
+                let imageSrc = image;
+                if (!image.startsWith('http') && !image.startsWith('/')) {
+                    // Passe "/uploads/" an, falls dein Server-Ordner für Bilder anders heißt (z.B. "/static/uploads/")
+                    imageSrc = '/uploads/' + image;
+                }
+
+                const thumbnailInfo = item.ThumbnailInfo && item.ThumbnailInfo[index];
+                const isVideo = isVideoFile(image);
+
+                if (isVideo) {
+                    const videoSrc = thumbnailInfo && thumbnailInfo.has_thumbnail
+                        ? thumbnailInfo.thumbnail_url
+                        : imageSrc;
+
+                    if (thumbnailInfo && thumbnailInfo.has_thumbnail) {
+                        return `
+                        <div class="video-container" style="position: relative; width: 120px; height: 120px; display: inline-block; margin-right: 15px; margin-bottom: 15px;">
+                            <img src="${videoSrc}" alt="${escapeHtml(item.Name || 'Medium')}" class="item-image" style="width: 100%; height: 100%; object-fit: cover; border-radius: 8px; border: 1px solid #ddd;">
+                            <div class="video-preview-overlay" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; background: rgba(0,0,0,0.6); border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 16px;">
+                                ▶
+                            </div>
+                        </div>`;
+                    } else {
+                        return `<div style="width: 120px; height: 120px; background: #333; color: #fff; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; margin-right: 15px; margin-bottom: 15px;">VIDEO</div>`;
+                    }
+                } else {
+                    const imageSrcFinal = thumbnailInfo && thumbnailInfo.has_thumbnail
+                        ? thumbnailInfo.thumbnail_url
+                        : imageSrc;
+
+                    return `<img src="${imageSrcFinal}" alt="${escapeHtml(item.Name || 'Medium')}" class="item-image" style="width: 120px; height: 120px; object-fit: cover; border-radius: 8px; border: 1px solid #ddd; margin-right: 15px; margin-bottom: 15px;">`;
+                }
+            }).join('');
+
+            mediaHtml = `<div class="detail-gallery-container" style="margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #eee; display: flex; flex-wrap: wrap;">${imagesHtml}</div>`;
+        }
+
+        // 3. Fetch the data
         fetch(`/api/item_detail/${itemId}`)
             .then(response => {
                 if (!response.ok) {
@@ -1262,12 +1314,12 @@
                 return response.text();
             })
             .then(html => {
-                // 3. Clean the HTML and display it
-                detailContent.innerHTML = DOMPurify.sanitize(html);
+                // 4. Clean the HTML and display it, injecting the media gallery before the fetched content
+                detailContent.innerHTML = mediaHtml + DOMPurify.sanitize(html);
             })
             .catch(err => {
                 console.error('Error loading detail:', err);
-                detailContent.innerHTML = '<p>Sorry, we could not load the item details. Please try again later.</p>';
+                detailContent.innerHTML = '<p style="color: red;">Entschuldigung, die Details konnten nicht geladen werden. Bitte versuche es später erneut.</p>';
             });
     }
 

Web/templates/upload_admin.html

@@ -954,8 +954,10 @@
                 <label for="anschaffungskosten">Anschaffungskosten (€)</label>
                 <input id="anschaffungskosten" name="anschaffungskosten">
             </div>
+
+
             <!-- Image upload (hidden for library mode) -->
-            <div class="form-group" {% if show_library_features %}style="display:none;"{% endif %}>
+            <div class="form-group">
                 <label for="images">Bilder/Videos:</label>
                 <input type="file" id="images" name="images" accept=".jpg, .jpeg, .png, .gif, .mp4, .mov, .avi, .mkv, .webm, .flv, .m4v, .3gp" multiple>
                 <div class="allowed-formats">Erlaubte Formate: JPG, JPEG, PNG, GIF, MP4, MOV, AVI, MKV, WEBM, FLV, M4V, 3GP</div>