sojorn/sojorn_docs/reference/NEXT_STEPS.md

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:

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

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:

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:

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 - Full implementation details
• 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.