Initial commit - PromptTech

2026-01-27 18:07:00 -06:00
commit 3959a223bf
262 changed files with 128736 additions and 0 deletions
--- a/docs/reports/IMAGE_UPLOAD_TESTING.md
+++ b/docs/reports/IMAGE_UPLOAD_TESTING.md
@@ -0,0 +1,149 @@
+# Image Upload Testing Guide
+
+## How to Test Image Upload Feature
+
+### 1. Access Admin Dashboard
+
+- Navigate to `http://localhost:5300/admin`
+- Login with admin credentials:
+  - Email: `admin@techzone.com`
+  - Password: `admin123`
+
+### 2. Create or Edit a Product
+
+- Click on the "Products" tab
+- Click "+ Add Product" button OR click "Edit" on an existing product
+
+### 3. Upload Images
+
+- In the product dialog, scroll to the "Product Images" section
+- Click the "Add Images" button
+- Select one or more image files from your computer
+- Wait for upload to complete (you'll see a success toast)
+
+### 4. Manage Images
+
+- **Reorder**: Drag and drop images to change their order
+- **Primary Image**: The first image is automatically marked as primary
+- **Delete**: Click the X button on any image to remove it
+- **Add More**: Click "Add Images" again to upload additional images
+
+### 5. Save Product
+
+- Fill in all required fields (name, description, price, category, stock)
+- Click "Create" or "Update" button
+- Images will be saved with the product
+
+## Technical Details
+
+### Frontend Implementation
+
+- **Component**: `ImageUploadManager.js`
+- **Upload Endpoint**: `POST /api/upload/image`
+- **Format**: multipart/form-data
+- **Authentication**: Bearer token required
+
+### Backend Implementation
+
+- **Endpoint**: `POST /api/upload/image`
+- **Storage**: `/backend/uploads/products/`
+- **URL Format**: `/uploads/products/{uuid}{ext}`
+- **Requirements**: Admin user only
+
+### Common Issues & Solutions
+
+#### Issue: 401 Unauthorized
+
+**Cause**: Not logged in as admin user  
+**Solution**: Ensure you're logged in with admin credentials
+
+#### Issue: 500 Internal Server Error
+
+**Cause**: Backend unable to save file  
+**Solution**: Check uploads directory exists and has write permissions
+
+```bash
+cd /media/pts/Website/PromptTech_Solution_Site/backend
+ls -la uploads/products/
+# Should show drwxr-xr-x permissions
+```
+
+#### Issue: Images not uploading
+
+**Cause**: Content-Type header conflict  
+**Solution**: Already fixed - axios handles multipart/form-data automatically
+
+#### Issue: Images not displaying
+
+**Cause**: Static files not mounted properly  
+**Solution**: Backend has `app.mount("/uploads", StaticFiles(...))` configured
+
+## Verification Steps
+
+### 1. Check Backend Logs
+
+```bash
+tail -f /proc/$(pgrep -f "python server.py")/fd/1
+```
+
+Look for:
+
+- `Uploading image: {filename}`
+- `Image uploaded successfully: /uploads/products/{uuid}.jpg`
+
+### 2. Check Uploads Directory
+
+```bash
+ls -la /media/pts/Website/PromptTech_Solution_Site/backend/uploads/products/
+```
+
+Should see uploaded image files after successful upload
+
+### 3. Test Image Access
+
+After uploading, access image directly:
+
+```bash
+curl -I http://localhost:8181/uploads/products/{filename}
+# Should return 200 OK
+```
+
+### 4. Check Product Data
+
+```bash
+curl http://localhost:8181/api/products/{product_id} | python3 -m json.tool
+```
+
+Should show `images` array with uploaded image URLs
+
+## Testing Checklist
+
+- [ ] Can upload single image
+- [ ] Can upload multiple images at once
+- [ ] Images display in preview grid
+- [ ] Can drag and drop to reorder images
+- [ ] First image marked as "Primary"
+- [ ] Can delete individual images
+- [ ] Images save with product
+- [ ] Images display on product detail page
+- [ ] Images display in carousel with navigation
+- [ ] Product card shows primary image
+
+## Current Status
+
+✅ Frontend: ImageUploadManager component implemented with drag-and-drop
+✅ Backend: Upload endpoint with admin authentication
+✅ Storage: /backend/uploads/products/ directory created
+✅ Static Files: Mounted at /uploads route
+✅ Database: ProductImage model with CASCADE delete
+✅ Error Handling: Improved logging and error messages
+✅ Content-Type: Fixed to let axios handle multipart boundaries
+
+## Next Steps If Issues Persist
+
+1. Check browser console for JavaScript errors
+2. Check Network tab for failed requests
+3. Verify admin user is logged in
+4. Check backend logs for detailed error messages
+5. Verify uploads directory permissions (755)
+6. Test with different image formats (JPG, PNG, GIF)