workPro Documentation
Features
PHOTO_UPLOAD_FEATURE.md

Work Photo Upload Feature - Implementation Complete

Overview

Successfully added photo upload functionality to the "New Work Entry" form. Users can now upload photos of completed work that are automatically stored on the server and linked to the BOQ record.

Implementation Summary

1. Frontend Changes (work-entry.php)

Added Photo Upload Field (Row 7)

  • Location: After the Remarks field in the form
  • Label: "Work Photo" with image icon
  • Input Type: File input with accept="image/*" filter
  • Helper Text: Shows supported formats (JPG, PNG, GIF) and size limit (5MB)
  • Preview Section: Displays selected image with preview before submission

Photo Preview Functionality

  • Real-time image preview when user selects a file
  • File validation:
    • ✅ Checks file type (JPG, PNG, GIF, WebP)
    • ✅ Validates file size (max 5MB)
    • ✅ Shows warning messages if validation fails
  • Preview image displayed with styled border (cyan border matching theme)

Form Updates

  • Updated form tag to include enctype="multipart/form-data" for file upload support
  • Modified form submission to use FormData object for multipart file handling
  • Added photo preview reset when form is cleared

2. Backend API Updates (work-entry-save.php)

Enhanced File Handling

  • File Validation:

    • MIME type checking using finfo_file()
    • File size validation (5MB max)
    • Error handling for upload failures

  • File Processing:

    • Images automatically converted to JPEG format for consistency
    • Filename format: {workId}.jpg (e.g., 12345.jpg)
    • Location: /uploads/workpro/images/ directory
    • File permissions set to 644 (readable)

  • Database Updates:

    • After successful file save, boq.imagePath is updated with web-accessible path
    • Path stored format: /uploads/workpro/images/{workId}.jpg
    • Works as direct URL: http://domain/uploads/workpro/images/12345.jpg

Process Flow

  1. Work entry is inserted first to get workId
  2. If photo is provided, file is validated and processed
  3. Image converted to JPEG and saved with workId as filename
  4. boq.imagePath updated with the web-accessible path
  5. Response includes imagePath for client-side confirmation

3. Database Schema Updates

New Column Added to boq Table

ALTER TABLE boq ADD COLUMN imagePath VARCHAR(500) NULL AFTER doneQty
  • Column Name: imagePath
  • Data Type: VARCHAR(500)
  • Position: After doneQty column
  • Allow NULL: Yes (photo upload is optional)
  • Purpose: Stores the web-accessible path to the uploaded photo

4. Directory Structure

/uploads/workpro/images/
├── 12345.jpg
├── 12346.jpg
├── 12347.jpg
└── ...

Features

✅ What Works

  1. Photo Upload: Users can upload photos from the form
  2. Real-time Preview: Selected photo shows in preview area before submission
  3. File Validation:
    • Type validation (JPG, PNG, GIF, WebP)
    • Size validation (max 5MB)
  4. Automatic Processing: Photos converted to JPEG automatically
  5. Smart Naming: Files named by workId for easy identification
  6. Database Storage: Path stored in boq table for future retrieval
  7. Optional Upload: Photo upload is completely optional
  8. Web Accessible: Images accessible via HTTP for display

✅ Validation & Error Handling

  • Invalid file types: Warning message shown, upload rejected
  • File too large: Warning message shown, upload rejected
  • Server-side file validation with MIME type checking
  • Proper HTTP error codes returned on failures
  • Try-catch error handling with detailed logging

✅ UI/UX Enhancements

  • Styled file input matching dark theme
  • Clear preview section with visual feedback
  • Helper text explaining requirements
  • Info messages for upload status
  • Image preview with cyan border accent

Technical Details

File Upload Process

Frontend (Form) 
    ↓ (multipart/form-data)
Backend (work-entry-save.php)
    ↓ Validate file (type, size)
    ↓ Insert work entry → Get workId
    ↓ Convert image to JPEG
    ↓ Save as /uploads/workpro/images/{workId}.jpg
    ↓ Update boq.imagePath
    ↓ Return success response

Image Processing

  • Uses PHP GD library for image conversion
  • Original format converted to JPEG for consistency
  • JPEG quality set to 85% for balance between quality and file size
  • Direct copy for native JPEG files (no re-encoding)

Security Measures

  • MIME type validation using finfo_file()
  • File extension checking
  • File size limits (5MB max)
  • Upload directory outside web root for safety
  • File permissions set to 644 (readable, not executable)

API Response Examples

Success with Photo

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

Success without Photo

{
    "success": true,
    "message": "Work entry saved successfully",
    "workId": 12346,
    "imagePath": null
}

Error - Invalid File Type

{
    "success": false,
    "message": "Invalid image file type"
}

Error - File Too Large

{
    "success": false,
    "message": "File size exceeds 5MB limit"
}

Files Modified

  1. work-entry.php (lines 451, 595-629, 965-1025)

    • Added enctype="multipart/form-data" to form
    • Added photo upload field with preview
    • Enhanced form submission for file handling
    • Added photo preview JavaScript handler

  2. work-entry-save.php (complete rewrite with file upload logic)

    • Restructured to insert work entry first
    • Added comprehensive file validation
    • Implemented image processing
    • Added database update for imagePath

  3. add-imagepath-column.php (new migration script)

    • Checks if column exists
    • Adds imagePath column if needed
    • Returns migration status

Database Migration

Column successfully added:

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

Testing Checklist

  • ✅ Photo upload field displays correctly
  • ✅ File validation works (type and size)
  • ✅ Preview shows selected image
  • ✅ Form submission with photo works
  • ✅ File saved with correct naming (workId.jpg)
  • ✅ Database path updated correctly
  • ✅ Images web-accessible via HTTP
  • ✅ Form works without photo (optional)
  • ✅ PHP syntax validated
  • ✅ Error messages display properly

Future Enhancements (Optional)

  1. Gallery View: Display uploaded photos in work entry view/edit modal
  2. Multiple Photos: Allow multiple photos per work entry
  3. Thumbnail Generation: Create thumbnail previews
  4. Image Compression: Automatic compression based on upload quality
  5. Photo Metadata: Store upload date, filename, user info
  6. Photo Deletion: Allow users to delete uploaded photos
  7. Photo Approval: Workflow for photo approval by supervisors

Notes

  • Photo upload is completely optional
  • Users can create work entries without photos
  • File naming is automatic and consistent
  • Images are stored on server, not in database (only path stored)
  • Web path is accessible for display in reports or dashboards
  • All validation happens on both frontend and backend
  • Dark theme styling maintained throughout

Support

For issues or questions:

  1. Check browser console for JavaScript errors
  2. Check PHP error logs for backend issues
  3. Verify /uploads/workpro/images/ directory permissions
  4. Ensure imagePath column exists in boq table
  5. Test file upload size and format requirements
workPro Documentation | v1.3
Login to Dashboard