sojorn/_legacy/supabase/functions/upload-image/index.ts
Patrick Britton 3c4680bdd7 Initial commit: Complete threaded conversation system with inline replies
**Major Features Added:**
- **Inline Reply System**: Replace compose screen with inline reply boxes
- **Thread Navigation**: Parent/child navigation with jump functionality
- **Chain Flow UI**: Reply counts, expand/collapse animations, visual hierarchy
- **Enhanced Animations**: Smooth transitions, hover effects, micro-interactions

 **Frontend Changes:**
- **ThreadedCommentWidget**: Complete rewrite with animations and navigation
- **ThreadNode Model**: Added parent references and descendant counting
- **ThreadedConversationScreen**: Integrated navigation handlers
- **PostDetailScreen**: Replaced with threaded conversation view
- **ComposeScreen**: Added reply indicators and context
- **PostActions**: Fixed visibility checks for chain buttons

 **Backend Changes:**
- **API Route**: Added /posts/:id/thread endpoint
- **Post Repository**: Include allow_chain and visibility fields in feed
- **Thread Handler**: Support for fetching post chains

 **UI/UX Improvements:**
- **Reply Context**: Clear indication when replying to specific posts
- **Character Counting**: 500 character limit with live counter
- **Visual Hierarchy**: Depth-based indentation and styling
- **Smooth Animations**: SizeTransition, FadeTransition, hover states
- **Chain Navigation**: Parent/child buttons with visual feedback

 **Technical Enhancements:**
- **Animation Controllers**: Proper lifecycle management
- **State Management**: Clean separation of concerns
- **Navigation Callbacks**: Reusable navigation system
- **Error Handling**: Graceful fallbacks and user feedback

This creates a Reddit-style threaded conversation experience with smooth
animations, inline replies, and intuitive navigation between posts in a chain.
2026-01-30 07:40:19 -06:00

151 lines
4.8 KiB
TypeScript

import { serve } from "https://deno.land/std@0.168.0/http/server.ts"
import { AwsClient } from 'https://esm.sh/aws4fetch@1.0.17'
import { trySignR2Url } from "../_shared/r2_signer.ts";
const corsHeaders = {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
}
serve(async (req) => {
if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders })
try {
// 1. AUTH CHECK
const authHeader = req.headers.get('Authorization')
if (!authHeader) {
return new Response(JSON.stringify({ code: 401, message: 'Missing authorization header' }), {
status: 401,
headers: { ...corsHeaders, 'Content-Type': 'application/json' },
})
}
// Extract user ID from JWT without full validation
// The JWT is already validated by Supabase's edge runtime
let userId: string
try {
const token = authHeader.replace('Bearer ', '')
const payload = JSON.parse(atob(token.split('.')[1]))
userId = payload.sub
if (!userId) throw new Error('No user ID in token')
console.log('Authenticated user:', userId)
} catch (e) {
console.error('Failed to parse JWT:', e)
return new Response(JSON.stringify({ code: 401, message: 'Invalid JWT' }), {
status: 401,
headers: { ...corsHeaders, 'Content-Type': 'application/json' },
})
}
// 2. CONFIGURATION
const R2_BUCKET = 'sojorn-media'
const ACCOUNT_ID = (Deno.env.get('R2_ACCOUNT_ID') ?? '').trim()
const ACCESS_KEY = (Deno.env.get('R2_ACCESS_KEY') ?? '').trim()
const SECRET_KEY = (Deno.env.get('R2_SECRET_KEY') ?? '').trim()
if (!ACCOUNT_ID || !ACCESS_KEY || !SECRET_KEY) throw new Error('Missing R2 Secrets')
// 3. PARSE MULTIPART FORM DATA (image + metadata)
const contentType = req.headers.get('content-type') || ''
if (!contentType.includes('multipart/form-data')) {
throw new Error('Request must be multipart/form-data')
}
const formData = await req.formData()
const imageFile = formData.get('image') as File
const fileName = formData.get('fileName') as string
if (!imageFile) {
throw new Error('No image file provided')
}
// Extract and sanitize extension from filename
let extension = 'jpg';
if (fileName) {
const parts = fileName.split('.');
if (parts.length > 1) {
const ext = parts[parts.length - 1].toLowerCase();
// Only allow safe image extensions
if (['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(ext)) {
extension = ext;
}
}
}
const safeFileName = `${crypto.randomUUID()}.${extension}`
const imageContentType = imageFile.type || 'application/octet-stream'
console.log(`Direct upload: fileName=${fileName}, contentType=${imageContentType}, size=${imageFile.size}`)
// 4. INIT R2 CLIENT
const r2 = new AwsClient({
accessKeyId: ACCESS_KEY,
secretAccessKey: SECRET_KEY,
region: 'auto',
service: 's3',
})
// 5. UPLOAD DIRECTLY TO R2 FROM EDGE FUNCTION
const url = `https://${ACCOUNT_ID}.r2.cloudflarestorage.com/${R2_BUCKET}/${safeFileName}`
const imageBytes = await imageFile.arrayBuffer()
const uploadResponse = await r2.fetch(url, {
method: 'PUT',
body: imageBytes,
headers: {
'Content-Type': imageContentType,
'Content-Length': imageBytes.byteLength.toString(),
},
})
if (!uploadResponse.ok) {
const errorText = await uploadResponse.text()
console.error('R2 upload failed:', errorText)
throw new Error(`R2 upload failed: ${uploadResponse.status} ${errorText}`)
}
console.log('Successfully uploaded to R2:', safeFileName)
// 6. RETURN SUCCESS RESPONSE
// Always return a signed URL to avoid public bucket access.
const signedUrl = await trySignR2Url(safeFileName)
if (!signedUrl) {
throw new Error('Failed to generate signed URL')
}
return new Response(
JSON.stringify({
publicUrl: signedUrl,
signedUrl,
signed_url: signedUrl,
fileKey: safeFileName,
fileName: safeFileName,
fileSize: imageFile.size,
contentType: imageContentType,
}),
{
headers: {
...corsHeaders,
'Content-Type': 'application/json',
}
}
)
} catch (error: unknown) {
const errorMessage = error instanceof Error ? error.message : 'Unknown error'
console.error('Upload function error:', errorMessage)
return new Response(
JSON.stringify({
error: errorMessage,
hint: 'Make sure you are logged in and R2 credentials are configured.'
}),
{
status: 400,
headers: {
...corsHeaders,
'Content-Type': 'application/json'
}
}
)
}
})