# Setup Guide: Enable S3 Uploads from Browser

## Overview
This guide will help you configure your Cognito Identity Pool to allow direct uploads from the browser to your S3 bucket (`bird-created`).

## Your Current Setup
- **AWS Account ID**: 235597076576
- **Region**: us-east-1
- **Cognito Identity Pool ID**: us-east-1:79f92923-df36-437e-9210-dc97785c5734
- **S3 Bucket**: bird-created
- **S3 Path**: eqsong-images/
- **Unauthenticated Role**: amplify-website-eqsong-193658-unauthRole
- **Authenticated Role**: amplify-website-eqsong-193658-authRole

## Step 1: Configure S3 Bucket CORS

This allows browser requests to upload to S3.

1. Go to [AWS S3 Console](https://s3.console.aws.amazon.com/s3/buckets/bird-created?region=us-east-1&tab=permissions)
2. Click on the **bird-created** bucket
3. Go to **Permissions** tab
4. Scroll down to **Cross-origin resource sharing (CORS)**
5. Click **Edit**
6. Paste this configuration:

```json
[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "DELETE",
            "HEAD"
        ],
        "AllowedOrigins": [
            "https://eqsong.com",
            "http://localhost:8000"
        ],
        "ExposeHeaders": [
            "ETag",
            "x-amz-server-side-encryption",
            "x-amz-request-id"
        ],
        "MaxAgeSeconds": 3000
    }
]
```

7. Click **Save changes**

## Step 2: Add IAM Permissions to Cognito Identity Pool Role

You need to allow the **unauthenticated** Cognito role to upload to S3.

### Option A: Using AWS Console (Recommended)

1. Go to [IAM Roles Console](https://console.aws.amazon.com/iam/home?region=us-east-1#/roles)

2. Search for and click on: **amplify-website-eqsong-193658-unauthRole**

3. Click **Add permissions** → **Create inline policy**

4. Click the **JSON** tab

5. Paste this policy:

```json
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AllowS3PhotoUpload",
            "Effect": "Allow",
            "Action": [
                "s3:PutObject",
                "s3:PutObjectAcl",
                "s3:GetObject"
            ],
            "Resource": "arn:aws:s3:::bird-created/eqsong-images/*"
        },
        {
            "Sid": "AllowS3BucketList",
            "Effect": "Allow",
            "Action": [
                "s3:ListBucket",
                "s3:GetBucketLocation"
            ],
            "Resource": "arn:aws:s3:::bird-created"
        }
    ]
}
```

6. Click **Review policy**

7. Name it: **PhotoManagerS3UploadPolicy**

8. Click **Create policy**

### Option B: Using AWS CLI

If you have AWS CLI configured, run this command:

```bash
# Create the policy document
cat > /tmp/s3-upload-policy.json << 'EOF'
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AllowS3PhotoUpload",
            "Effect": "Allow",
            "Action": [
                "s3:PutObject",
                "s3:PutObjectAcl",
                "s3:GetObject"
            ],
            "Resource": "arn:aws:s3:::bird-created/eqsong-images/*"
        },
        {
            "Sid": "AllowS3BucketList",
            "Effect": "Allow",
            "Action": [
                "s3:ListBucket",
                "s3:GetBucketLocation"
            ],
            "Resource": "arn:aws:s3:::bird-created"
        }
    ]
}
EOF

# Attach the policy to the role
aws iam put-role-policy \
    --role-name amplify-website-eqsong-193658-unauthRole \
    --policy-name PhotoManagerS3UploadPolicy \
    --policy-document file:///tmp/s3-upload-policy.json \
    --region us-east-1
```

## Step 3: Update Photo Manager to Use AWS SDK

Now we'll update your photo-manager.html to use AWS SDK v2 (v3 has CORS issues with CDN).

The upload function needs to be replaced. I'll create the updated version for you.

## Step 4: Test the Upload

1. Go to https://eqsong.com/photo-manager
2. Login with your credentials
3. Select or create an album
4. Drag and drop a test photo
5. Click **Upload Selected Photos**
6. The photo should upload directly to S3!

## Verification

After upload, verify the photo appears in:
- S3 Console: https://s3.console.aws.amazon.com/s3/buckets/bird-created?prefix=eqsong-images/
- Your Gallery: https://eqsong.com/gallery.html

## Troubleshooting

### Error: "Access Denied"
- Make sure the IAM policy was added correctly to the unauthenticated role
- Check that the policy Resource ARN matches your bucket: `arn:aws:s3:::bird-created/eqsong-images/*`

### Error: "CORS policy blocked"
- Verify CORS configuration in S3 bucket includes your domain: `https://eqsong.com`
- Make sure AllowedMethods includes "PUT"

### Error: "Credentials not found"
- Verify your Cognito Identity Pool ID is correct: `us-east-1:79f92923-df36-437e-9210-dc97785c5734`
- Check the pool exists in [Cognito Console](https://console.aws.amazon.com/cognito/v2/idp/identity-pools?region=us-east-1)

### Still Not Working?
Check browser console for detailed error messages. Common issues:
- Identity Pool might be deleted or in different region
- S3 bucket policy might be blocking uploads
- CloudFront/CDN might need cache purge

## Security Notes

**Important**: This setup allows **unauthenticated** uploads from your website. To improve security:

1. **Restrict by file size**: The code limits to 10MB
2. **Restrict by file type**: Only images are allowed
3. **Use authenticated role**: Require user login before uploading
4. **Add rate limiting**: Use AWS WAF or API Gateway
5. **Scan uploads**: Add AWS Lambda virus scanning

For production, consider moving to authenticated-only uploads by:
- Setting up Amplify Auth (Cognito User Pool)
- Using the **authRole** instead of **unauthRole**
- Requiring users to create accounts

## Next Steps

After completing this setup:
1. Test upload functionality
2. Monitor S3 costs (uploads and storage)
3. Set up S3 lifecycle rules to archive old photos
4. Consider adding image optimization (resize, compress)
5. Add backup/versioning in S3 bucket settings

## Need Help?

- AWS Support: https://console.aws.amazon.com/support/home
- Cognito Documentation: https://docs.aws.amazon.com/cognito/
- S3 Documentation: https://docs.aws.amazon.com/s3/

---

**Ready to implement?** Let me know when you've completed Step 1 & 2, and I'll update your photo-manager.html with the working upload code!