diff --git a/ERWEITERUNG.md b/ERWEITERUNG.md new file mode 100644 index 0000000..eb0994f --- /dev/null +++ b/ERWEITERUNG.md @@ -0,0 +1,552 @@ +# Image-Uploader Erweiterung: Multi-Image Upload mit Beschreibung + +## 🎯 Ziel +Erweiterung der bestehenden Single-Image-Upload-FunktionalitĂ€t zu einem Multi-Image-Upload mit Beschreibungstext fĂŒr spĂ€tere Slideshow-Nutzung. + +## 📊 AufwandsschĂ€tzung +**GeschĂ€tzter Aufwand: 8-12 Stunden** (verteilt auf 2-3 Arbeitstage) + +### KomplexitĂ€tsbewertung: ⭐⭐⭐☆☆ (Mittel) + +## 🔄 ÄnderungsĂŒbersicht + +### Frontend Änderungen (5-7 Stunden) +- **Neue Multi-Upload-Komponente** +- **UI fĂŒr Beschreibungstext** +- **Vorschau-Galerie** +- **Upload-Progress fĂŒr mehrere Dateien** + +### Backend Änderungen (2-3 Stunden) +- **Neue API-Endpoints** +- **Datenbank/JSON-Struktur fĂŒr Upload-Gruppen** +- **Batch-Upload-Verarbeitung** + +### Integration & Testing (1-2 Stunden) +- **Frontend-Backend-Integration** +- **Error Handling** +- **UI/UX Tests** + +--- + +## đŸ—ïž Technische Umsetzung + +### 1. Backend-Erweiterungen + +#### 1.1 Neue Datenstruktur +```javascript +// Neue Upload-Group Struktur +{ + groupId: "unique-group-id", + description: "Benutzer-Beschreibung", + uploadDate: "2025-10-11T10:30:00Z", + images: [ + { + fileName: "abc123.jpg", + originalName: "foto1.jpg", + filePath: "/upload/abc123.jpg", + uploadOrder: 1 + }, + { + fileName: "def456.png", + originalName: "foto2.png", + filePath: "/upload/def456.png", + uploadOrder: 2 + } + ] +} +``` + +#### 1.2 Neue API-Endpoints +- `POST /api/upload/batch` - Multi-Image Upload +- `GET /api/groups/:groupId` - Upload-Gruppe abrufen +- `GET /api/groups` - Alle Upload-Gruppen auflisten +- `GET /api/slideshow/:groupId` - Slideshow-Daten + +#### 1.3 Dateien zu erstellen/Ă€ndern: +``` +backend/src/ +├── routes/ +│ ├── upload.js # ✏ Erweitern +│ ├── batch-upload.js # 🆕 Neu +│ └── groups.js # 🆕 Neu +├── models/ +│ └── uploadGroup.js # 🆕 Neu +├── utils/ +│ └── groupStorage.js # 🆕 Neu (JSON-basiert) +└── constants.js # ✏ Neue Endpoints hinzufĂŒgen +``` + +### 2. Frontend-Erweiterungen + +#### 2.1 Neue Komponenten +``` +frontend/src/Components/ +├── ComponentUtils/ +│ ├── MultiImageUpload.js # 🆕 Haupt-Upload-Komponente +│ ├── ImagePreviewGallery.js # 🆕 Vorschau der ausgewĂ€hlten Bilder +│ ├── DescriptionInput.js # 🆕 Textfeld fĂŒr Beschreibung +│ ├── UploadProgress.js # 🆕 Progress-Anzeige fĂŒr alle Dateien +│ └── Css/ +│ ├── MultiUpload.css # 🆕 Styling +│ └── ImageGallery.css # 🆕 Galerie-Styling +├── Pages/ +│ ├── MultiUploadPage.js # 🆕 Neue Seite fĂŒr Multi-Upload +│ ├── SlideshowPage.js # 🆕 Slideshow-Anzeige +│ └── GroupsOverviewPage.js # 🆕 Übersicht aller Upload-Gruppen +└── Utils/ + └── batchUpload.js # 🆕 Batch-Upload-Logik +``` + +#### 2.2 Routing-Erweiterungen +```javascript +// Neue Routen in App.js + + + +``` + +--- + +## 📋 Detaillierte Implementierungsschritte + +### Phase 1: Backend-Grundlage (2-3h) + +#### Schritt 1.1: Upload-Gruppen Datenmodell +```javascript +// backend/src/models/uploadGroup.js +class UploadGroup { + constructor(description) { + this.groupId = generateId(); + this.description = description; + this.uploadDate = new Date().toISOString(); + this.images = []; + } + + addImage(fileName, originalName, uploadOrder) { + this.images.push({ + fileName, + originalName, + filePath: `/upload/${fileName}`, + uploadOrder + }); + } +} +``` + +#### Schritt 1.2: JSON-basierte Speicherung +```javascript +// backend/src/utils/groupStorage.js +const fs = require('fs'); +const path = require('path'); + +const GROUPS_FILE = path.join(__dirname, '../data/upload-groups.json'); + +class GroupStorage { + static saveGroup(group) { + // JSON-Datei lesen, Gruppe hinzufĂŒgen, zurĂŒckschreiben + } + + static getGroup(groupId) { + // Gruppe aus JSON-Datei laden + } + + static getAllGroups() { + // Alle Gruppen laden + } +} +``` + +#### Schritt 1.3: Batch-Upload API +```javascript +// backend/src/routes/batch-upload.js +router.post('/api/upload/batch', (req, res) => { + const { description } = req.body; + const files = req.files.images; // Array von Dateien + + const group = new UploadGroup(description); + + // Alle Dateien verarbeiten + files.forEach((file, index) => { + const fileName = generateId() + '.' + getFileExtension(file.name); + file.mv(`upload/${fileName}`); + group.addImage(fileName, file.name, index + 1); + }); + + GroupStorage.saveGroup(group); + res.json({ groupId: group.groupId, message: 'Upload successful' }); +}); +``` + +### Phase 2: Frontend Multi-Upload UI (3-4h) + +#### Schritt 2.1: Multi-Image Dropzone +```javascript +// frontend/src/Components/ComponentUtils/MultiImageUpload.js +import { useDropzone } from 'react-dropzone'; + +function MultiImageUpload({ onImagesSelected }) { + const { getRootProps, getInputProps, acceptedFiles } = useDropzone({ + accept: 'image/*', + multiple: true, + onDrop: (files) => { + onImagesSelected(files); + } + }); + + return ( +
+ +

Ziehe mehrere Bilder hierher oder klicke zum AuswÀhlen

+

({acceptedFiles.length} Dateien ausgewÀhlt)

+
+ ); +} +``` + +#### Schritt 2.2: Bild-Vorschau Galerie +```javascript +// frontend/src/Components/ComponentUtils/ImagePreviewGallery.js +function ImagePreviewGallery({ images, onRemoveImage, onReorderImages }) { + return ( +
+ {images.map((image, index) => ( +
+ {`Preview + +
{index + 1}
+
+ ))} +
+ ); +} +``` + +#### Schritt 2.3: Beschreibungs-Input +```javascript +// frontend/src/Components/ComponentUtils/DescriptionInput.js +function DescriptionInput({ description, onDescriptionChange, maxLength = 500 }) { + return ( +
+ +