> ## Documentation Index
> Fetch the complete documentation index at: https://docs.adhdsimple.co.uk/llms.txt
> Use this file to discover all available pages before exploring further.

# Medication Images Upload Process

> Upload medication images to Supabase Storage and link them to the database

## Overview

The system converts PNG medication images to WebP format and uploads them to Supabase Storage, then links them to the medications table.

## How It Works

1. Place PNG files in the expected directory with correct naming
2. Run the upload script
3. Script converts PNG to WebP (80% quality)
4. Uploads to `medication-images` bucket in Supabase Storage
5. Updates medication records with image URLs

## File Naming

Files must follow this pattern:

```
{MedicationName}-{Dosage}.png
```

**Examples:**

* `Concerta-XL-18.png` → Concerta XL 18mg
* `Elvvanse-20.png` → Elvvanse 20mg
* `Medikinet-XL-10.png` → Medikinet XL 10mg

## Setup

### Environment Variables

```bash theme={null}
# In your .env file
VITE_SUPABASE_URL=your_supabase_url
SUPABASE_SERVICE_ROLE_KEY=your_service_role_key
```

### Dependencies

```bash theme={null}
npm install sharp @supabase/supabase-js
```

### Images Directory

Place PNG files in:

```
/Users/cameronhouston/Downloads/_Medication Library/
```

## Running the Script

```bash theme={null}
npm run upload-medication-images
```

## Expected Output

```bash theme={null}
🚀 Starting medication image upload process...
📁 Found 58 PNG files to process

🔄 Processing Affenid-XL-18.png...
📏 Original: 344064 bytes, WebP: 28476 bytes
✅ Uploaded: Affenid-XL-18.webp
🔍 Looking for medication: Affenid XL 18
✅ Updated medication: Methylphenidate (Concerta) with image URL

📊 Summary:
   📸 Images converted and uploaded: 58/58
   💊 Medication records updated: 45/58

✅ Process completed!
```

## Database Changes

The script adds an `image_url` column to the medications table:

```sql theme={null}
ALTER TABLE medications 
ADD COLUMN image_url TEXT;
```

## Storage Configuration

* **Bucket**: `medication-images` (public access)
* **Format**: WebP at 80% quality
* **Size limit**: 1MB per file
* **MIME type**: `image/webp`

## Troubleshooting

### Missing Service Role Key

```
❌ Missing environment variables. Make sure VITE_SUPABASE_URL and SUPABASE_SERVICE_ROLE_KEY are set.
```

**Fix**: Add service role key to `.env` file

### Directory Not Found

```
❌ Images directory not found: /Users/cameronhouston/Downloads/_Medication Library
```

**Fix**: Update `IMAGES_DIR` in script or move images to expected location

### Medication Not Found

```
⚠️  No medication found for: SomeMedicationName
```

**Fix**: Check medication name in database or adjust filename

### Upload Failures

```
❌ Upload failed for filename.png: Storage error
```

**Fix**: Check Supabase permissions and storage quota

## Manual Verification

After running the script:

```sql theme={null}
-- Check uploaded images
SELECT name, image_url 
FROM medications 
WHERE image_url IS NOT NULL;

-- Verify storage bucket
SELECT name, metadata 
FROM storage.objects 
WHERE bucket_id = 'medication-images';
```

## Frontend Usage

Images are accessed via the `image_url` field in medication records:

```typescript theme={null}
<img src={medication.image_url} alt={medication.name} /> 
```