# 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)
