PromptTech/docs/reports/IMAGE_UPLOAD_TESTING.md

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

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

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

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:

curl -I http://localhost:8181/uploads/products/{filename}
# Should return 200 OK

4. Check Product Data

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)