137 lines
3.8 KiB
Markdown
137 lines
3.8 KiB
Markdown
# Image Upload - Ready to Test! ✅
|
|
|
|
## Configuration Complete
|
|
|
|
All backend configuration is done. Images should now work properly!
|
|
|
|
### What Was Configured:
|
|
|
|
1. ✅ **Custom Domain Connected**: `media.sojorn.net` → R2 bucket `sojorn-media`
|
|
2. ✅ **Environment Variable Set**: `R2_PUBLIC_URL=https://media.sojorn.net`
|
|
3. ✅ **Edge Function Deployed**: Updated `upload-image` function using custom domain
|
|
4. ✅ **DNS Verified**: Domain resolving to Cloudflare CDN
|
|
5. ✅ **API Queries Fixed**: All post queries include `image_url` field
|
|
|
|
## Test Instructions
|
|
|
|
### 1. Upload a Test Image
|
|
|
|
In the app:
|
|
1. Tap the **compose/create post** button
|
|
2. Add an image from your device
|
|
3. (Optional) Apply a filter
|
|
4. Write some text for the post
|
|
5. Submit the post
|
|
|
|
### 2. Verify the Image
|
|
|
|
**Expected behavior**:
|
|
- Image uploads successfully
|
|
- Post appears in feed with image visible
|
|
- Image URL format: `https://media.sojorn.net/{uuid}.jpg`
|
|
|
|
**If it works**: Images will now display everywhere (feed, profiles, chains) ✅
|
|
|
|
### 3. Check Database (Optional)
|
|
|
|
To verify the URL format:
|
|
```sql
|
|
SELECT id, image_url, created_at
|
|
FROM posts
|
|
WHERE image_url IS NOT NULL
|
|
ORDER BY created_at DESC
|
|
LIMIT 5;
|
|
```
|
|
|
|
Expected format: `https://media.sojorn.net/[uuid].[ext]`
|
|
|
|
## Troubleshooting
|
|
|
|
### Images Still Not Showing
|
|
|
|
If images don't display after uploading:
|
|
|
|
#### 1. Check Edge Function Logs
|
|
```bash
|
|
npx supabase functions logs upload-image --project-ref zwkihedetedlatyvplyz
|
|
```
|
|
|
|
Look for:
|
|
- Upload errors
|
|
- "Missing R2_PUBLIC_URL" errors (shouldn't happen now)
|
|
- R2 authentication errors
|
|
|
|
#### 2. Test Domain Directly
|
|
|
|
After uploading an image, copy its URL from the database and test:
|
|
```bash
|
|
curl -I https://media.sojorn.net/[filename-from-db]
|
|
```
|
|
|
|
Should return `HTTP/1.1 200 OK` or `HTTP/2 200`
|
|
|
|
#### 3. Hot Reload the App
|
|
|
|
In the Flutter terminal, press:
|
|
- `r` for hot reload
|
|
- `R` for full restart
|
|
|
|
#### 4. Check App Logs
|
|
|
|
Look in the Flutter console for:
|
|
- Network errors
|
|
- Image loading failures
|
|
- CORS errors (shouldn't happen with proper R2 CORS)
|
|
|
|
### Common Issues
|
|
|
|
**Issue**: "Missing R2_PUBLIC_URL" error in logs
|
|
**Solution**: Secret might not have propagated. Wait 1-2 minutes and try again.
|
|
|
|
**Issue**: Image returns 404 on custom domain
|
|
**Solution**: File might not have uploaded to R2. Check edge function logs for upload errors.
|
|
|
|
**Issue**: Image returns 403 Forbidden
|
|
**Solution**: R2 bucket permissions issue. Verify API token has "Object Read & Write" permissions.
|
|
|
|
## What's Next
|
|
|
|
Once images are working:
|
|
|
|
### Immediate
|
|
- Upload a few test images with different formats (JPG, PNG)
|
|
- Test with different image sizes
|
|
- Try different filters
|
|
- Verify images appear in all views (feed, profile, chains)
|
|
|
|
### Future Enhancements (Optional)
|
|
|
|
From [IMAGE_UPLOAD_IMPLEMENTATION.md](./docs/IMAGE_UPLOAD_IMPLEMENTATION.md#future-enhancements):
|
|
1. **Image compression**: Further optimize file sizes
|
|
2. **Multiple images**: Allow multiple images per post
|
|
3. **Image galleries**: View all images from a user
|
|
4. **Video support**: Extend to video uploads
|
|
5. **CDN optimization**: Configure Cloudflare caching rules
|
|
|
|
## Documentation
|
|
|
|
Complete guides available:
|
|
- **[IMAGE_UPLOAD_IMPLEMENTATION.md](./docs/IMAGE_UPLOAD_IMPLEMENTATION.md)** - Full implementation details
|
|
- **[R2_CUSTOM_DOMAIN_SETUP.md](./docs/R2_CUSTOM_DOMAIN_SETUP.md)** - Custom domain setup guide
|
|
|
|
## Summary
|
|
|
|
| Component | Status |
|
|
|-----------|--------|
|
|
| R2 Bucket | ✅ Configured with custom domain |
|
|
| Edge Function | ✅ Deployed with R2_PUBLIC_URL |
|
|
| Database Schema | ✅ `posts.image_url` column exists |
|
|
| API Queries | ✅ Include `image_url` field |
|
|
| Flutter Model | ✅ Post model parses `image_url` |
|
|
| Widget Display | ✅ PostItem widget shows images |
|
|
| Custom Domain | ✅ `media.sojorn.net` connected |
|
|
|
|
**Ready to test!** 🚀
|
|
|
|
Try uploading an image now and it should work. If you encounter any issues, check the troubleshooting section above.
|