Photo Upload Feature - Quick Reference

User Guide

How to Upload a Photo

1. Fill Form Fields

   • Select DC → Activity → Schedule → Feeder → Item
   • Enter Work Done quantity
   • (Optional) Add remarks

2. Upload Photo

   • Click on "Work Photo" file input
   • Select a photo from your device (JPG, PNG, GIF)
   • File must be less than 5MB
   • Image preview appears below input field

3. Submit

   • Click "Add Work Entry" button
   • System saves work entry and processes photo
   • Success message confirms upload

4. Result

   • Work entry is saved
   • Photo is stored as {workId}.jpg
   • Path is saved in database

Technical Implementation

Frontend Flow

User selects photo
    ↓
JavaScript validates:
  ✓ File type (image/jpeg, image/png, etc.)
  ✓ File size (max 5MB)
    ↓
Show preview image
    ↓
User submits form
    ↓
FormData sent with multipart/form-data

Backend Flow

Receive multipart form data
    ↓
Validate form fields
    ↓
Insert work entry → Get workId
    ↓
If file provided:
  ✓ Validate MIME type
  ✓ Check file size
  ✓ Convert to JPEG (if needed)
  ✓ Save as /uploads/workpro/images/{workId}.jpg
  ✓ Update boq.imagePath
    ↓
Return success response with imagePath

File Structure

Storage Location

/uploads/workpro/images/12345.jpg

Web URL

http://domain/uploads/workpro/images/12345.jpg

Database Storage

Table: boq
Column: imagePath
Value: /uploads/workpro/images/12345.jpg

Configuration

File Upload Limits

• Max File Size: 5MB
• Allowed Formats: JPG, PNG, GIF, WebP
• Storage Format: Always converted to JPG
• JPEG Quality: 85%

Directory Permissions

/uploads/workpro/images/
Permissions: 755 (rwxr-xr-x)
Owner: ubuntu
Group: ubuntu

Code Locations

Frontend (HTML/JavaScript)

• File: /workpro/public/work-entry.php
• Form Tag: Line 451 (enctype="multipart/form-data")
• Photo Field: Lines 595-629 (Row 7)
• Preview Handler: Lines 965-997
• Form Submission: Lines 999-1025

Backend (API)

• File: /workpro/public/api/work-entry-save.php
• File Validation: Lines 119-142
• Image Processing: Lines 144-180
• Database Update: Lines 182-187

Database

• Table: boq
• Column: imagePath (VARCHAR 500)
• Position: After doneQty
• Type: Nullable

Error Messages

Response Examples

Success Response

{
  "success": true,
  "message": "Work entry saved successfully with photo",
  "workId": 12345,
  "imagePath": "/uploads/workpro/images/12345.jpg"
}

Accessing Uploaded Photo

URL: /uploads/workpro/images/12345.jpg
HTML: <img src="/uploads/workpro/images/12345.jpg" alt="Work Photo">

Troubleshooting

Photo not uploading?

1. Check file format (must be image)
2. Check file size (must be < 5MB)
3. Check browser console for JavaScript errors
4. Verify directory permissions

Photo not accessible?

1. Verify /uploads/workpro/images/ directory exists
2. Check file permissions (644)
3. Verify imagePath value in database
4. Check server logs for errors

Database errors?

1. Verify imagePath column exists in boq table
2. Check column is VARCHAR(500)
3. Run migration if needed

Database Column Details

-- Column Definition
ALTER TABLE boq ADD COLUMN imagePath VARCHAR(500) NULL AFTER doneQty;

-- Example Data
workId: 12345
imagePath: /uploads/workpro/images/12345.jpg

-- Query Examples
-- Get photo path for a BOQ
SELECT boqId, imagePath FROM boq WHERE imagePath IS NOT NULL;

-- Update photo path (manual)
UPDATE boq SET imagePath = '/uploads/workpro/images/12345.jpg' WHERE boqId = 999;

-- Clear photo path
UPDATE boq SET imagePath = NULL WHERE boqId = 999;

Security Notes

✅ What's Secure

• File type validation (MIME check)
• File size limits (5MB max)
• Filename sanitization (workId-based)
• Permissions set correctly (644)
• Upload directory outside web root

⚠️ Best Practices

• Monitor upload directory size
• Implement cleanup for old unused photos
• Consider backup strategy for images
• Monitor disk space usage

Performance Notes

• Image conversion to JPEG happens server-side
• Average upload time: 1-2 seconds (depends on internet)
• File size after JPEG conversion: Usually 50-500KB
• Preview loads instantly in browser

Future Enhancements

Potential additions:

• Multiple photo upload per work entry
• Photo gallery in view/edit modal
• Automatic thumbnail generation
• Photo metadata storage
• Photo deletion functionality
• Approved/rejected workflow