# Image Upload Feature Documentation

This document explains how the image upload feature works in the StoreWeb e-commerce platform.

## Overview

The image upload feature allows administrators to add product images when creating or editing products. Images are stored in the `assets/uploads/` directory and their paths are saved in the database.

## Implementation Details

### File Structure
- Upload Directory: `assets/uploads/`
- Database Column: `products.image` (VARCHAR)
- Allowed File Types: JPG, JPEG, PNG, GIF

### Key Features
1. Image upload when adding new products
2. Image upload when editing existing products
3. Display of current image when editing products
4. Image display in product listings and details
5. Fallback to placeholder icon when no image is available

## How It Works

### Adding Products with Images
1. Admin navigates to "Add New Product" page
2. Admin fills in product details and selects an image file
3. When form is submitted:
   - File is validated for type (jpg, jpeg, png, gif)
   - File is moved to `assets/uploads/` directory
   - File path is saved to database
4. Product is created with image

### Editing Products with Images
1. Admin navigates to "Edit Product" page
2. Current image is displayed (if exists)
3. Admin can choose to upload a new image
4. When form is submitted:
   - If new image is uploaded, it replaces the old one
   - If no new image is uploaded, existing image is kept
5. Product is updated

### Displaying Images
Images are displayed in:
- Admin product listings
- Admin dashboard recent products
- Main website product listings
- Product detail pages
- Homepage featured products

## Security Considerations

1. File Type Validation: Only allows JPG, JPEG, PNG, and GIF files
2. File Storage: Images stored outside of web root access (within assets directory)
3. Path Storage: Only relative paths stored in database
4. Input Sanitization: File names are processed with basename() function

## Technical Implementation

### Database Changes
The `products` table already had an `image` column, so no database changes were needed.

### Code Changes
1. Modified `admin/add_product.php` to handle file uploads
2. Modified `admin/edit_product.php` to handle file uploads
3. Updated form enctype to `multipart/form-data`
4. Added image display logic to all product listing pages
5. Added CSS styles for proper image display

### File Handling
```php
// Handle file upload
if (isset($_FILES['image']) && $_FILES['image']['error'] === UPLOAD_ERR_OK) {
    $uploadDir = '../assets/uploads/';
    $fileName = basename($_FILES['image']['name']);
    $targetFilePath = $uploadDir . $fileName;
    $fileType = pathinfo($targetFilePath, PATHINFO_EXTENSION);
    
    // Allow certain file formats
    $allowTypes = array('jpg', 'png', 'jpeg', 'gif');
    if (in_array($fileType, $allowTypes)) {
        // Upload file to server
        if (move_uploaded_file($_FILES['image']['tmp_name'], $targetFilePath)) {
            // Save relative path to database
            $image = 'assets/uploads/' . $fileName;
        }
    }
}
```

## Usage Instructions

### Adding a Product with Image
1. Log in as admin
2. Navigate to Admin Panel > Products > Add New Product
3. Fill in product details
4. Select an image file using the file input
5. Click "Add Product"

### Editing a Product Image
1. Log in as admin
2. Navigate to Admin Panel > Products
3. Click "Edit" for the desired product
4. Select a new image file (optional)
5. Click "Update Product"

## Supported File Types
- JPEG/JPG
- PNG
- GIF

## Error Handling
- Invalid file types show error messages
- Upload failures show error messages
- Missing images show placeholder icons

## Future Improvements
- Image resizing/thumbnails
- File size validation
- Duplicate file name handling
- Image optimization
- Cloud storage integration