150 lines
4.0 KiB
Markdown
150 lines
4.0 KiB
Markdown
# 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)
|