Preview Component - Google Cloud Storage Support

The Preview component now supports Google Cloud Storage (GCS) URIs in addition to HTTP URLs.

What was added:

  1. GCS URI Support: The Preview component now accepts gs:// URIs and automatically converts them to signed URLs
  2. Backend API Extension: Extended /api/gcs endpoint to generate signed URLs for GCS objects
  3. Automatic Conversion: GCS URIs are automatically detected and converted to signed URLs client-side
  4. Loading States: Shows loading states while converting GCS URIs
  5. Error Handling: Graceful fallback if GCS URI conversion fails

How it works:

  1. Frontend Detection: When a gs:// URI is passed to the Preview component, it’s detected in the convertGcsUriToSignedUrl function
  2. API Call: The frontend makes a POST request to /api/gcs with the GCS URI
  3. Signed URL Generation: The backend uses Google Application Default Credentials to generate a signed URL (valid for 1 hour)
  4. Media Display: The signed URL is used to display the media content

Example usage:

// Previously only worked with HTTP URLs:
<Preview uri="https://example.com/image.jpg" type="image/jpeg" name="Example Image" />

// Now also works with GCS URIs:
<Preview uri="gs://my-bucket/path/to/image.jpg" type="image/jpeg" name="GCS Image" />

// Or with multiple items including GCS URIs:
<Preview items={[
  { uri: "gs://my-bucket/document.pdf", type: "application/pdf", name: "Document" },
  { uri: "gs://my-bucket/audio.mp3", type: "audio/mpeg", name: "Audio File" }
]} />

Supported media types with GCS:

  • Images (JPEG, PNG, GIF, etc.)
  • Videos (MP4, WebM, etc.)
  • Audio files (MP3, WAV, etc.)
  • PDF documents
  • Text files

Security:

  • Uses Google Application Default Credentials (no hardcoded credentials)
  • Signed URLs expire after 1 hour for security
  • Only authorized GCS buckets can be accessed (based on service account permissions)
  • GCS URIs bypass the domain whitelist since they’re converted to signed storage.googleapis.com URLs

Error handling:

  • If GCS URI conversion fails, the component shows an error message
  • Falls back gracefully to prevent breaking the UI
  • Development mode shows detailed error messages for debugging