CDN & Storage

import { Stack0 } from '@stack0/sdk'
 
const stack0 = new Stack0({
  apiKey: process.env.STACK0_API_KEY!
})
 
// Step 1: Get a presigned upload URL
const { uploadUrl, assetId, cdnUrl } = await stack0.cdn.getUploadUrl({
  filename: 'profile.jpg',
  mimeType: 'image/jpeg',
  size: file.size, // File size in bytes
})
 
// Step 2: Upload directly to S3
await fetch(uploadUrl, {
  method: 'PUT',
  body: file,
  headers: {
    'Content-Type': 'image/jpeg',
  },
})
 
// Step 3: Confirm the upload
await stack0.cdn.confirmUpload({ assetId })
 
// The file is now available at cdnUrl
console.log('File available at:', cdnUrl)

// Upload to a specific folder
const { uploadUrl, assetId, cdnUrl } = await stack0.cdn.getUploadUrl({
  filename: 'avatar.jpg',
  mimeType: 'image/jpeg',
  size: file.size,
  folder: 'users/avatars',
})
 
// Upload product images
const productUpload = await stack0.cdn.getUploadUrl({
  filename: 'hero.png',
  mimeType: 'image/png',
  size: file.size,
  folder: 'products/SKU-12345',
})

// Upload with watermark from another CDN asset
const { uploadUrl, assetId, cdnUrl } = await stack0.cdn.getUploadUrl({
  filename: 'branded-photo.jpg',
  mimeType: 'image/jpeg',
  size: file.size,
  watermark: {
    assetId: 'your-logo-asset-id', // Reference another CDN asset
    position: 'bottom-right',
    opacity: 50, // 50% transparent
    sizingMode: 'relative', // Size as percentage of main image
    width: 15, // 15% of image width
    offsetX: 20, // 20px from edge
    offsetY: 20,
  },
})
 
// Or use a URL for the watermark
const withUrlWatermark = await stack0.cdn.getUploadUrl({
  filename: 'photo.jpg',
  mimeType: 'image/jpeg',
  size: file.size,
  watermark: {
    url: 'https://example.com/logo.png',
    position: 'center',
    opacity: 30,
    tile: true, // Repeat watermark across image
    tileSpacing: 150,
  },
})

const asset = await stack0.cdn.get({ id: 'asset_xxx' })
 
console.log('Filename:', asset.filename)
console.log('Size:', asset.size, 'bytes')
console.log('Type:', asset.type) // 'image' | 'video' | 'audio' | 'document' | 'other'
console.log('CDN URL:', asset.cdnUrl)
console.log('Dimensions:', asset.width, 'x', asset.height) // For images
console.log('Created:', asset.createdAt)

// List all assets
const { assets, total, hasMore } = await stack0.cdn.list({
  limit: 50,
  offset: 0,
})
 
// Filter by folder
const userAvatars = await stack0.cdn.list({
  folder: 'users/avatars',
})
 
// Filter by type
const images = await stack0.cdn.list({
  type: 'image',
})
 
// Search by filename
const results = await stack0.cdn.list({
  search: 'hero',
})
 
// Sort by date or size
const recent = await stack0.cdn.list({
  sortBy: 'createdAt',
  sortOrder: 'desc',
})

// Update asset metadata
const updated = await stack0.cdn.update({
  id: 'asset_xxx',
  filename: 'new-name.jpg',
  folder: 'archived',
  tags: ['product', 'hero'],
  alt: 'Product hero image',
})

// Move multiple assets to a folder
const result = await stack0.cdn.move({
  assetIds: ['asset_xxx', 'asset_yyy', 'asset_zzz'],
  folder: 'archived/2024',
})
 
console.log(`Moved ${result.movedCount} assets`)
 
// Move to root folder
await stack0.cdn.move({
  assetIds: ['asset_xxx'],
  folder: null, // null = root
})

// Delete a single asset
await stack0.cdn.delete({ id: 'asset_xxx' })
 
// Delete multiple assets
const result = await stack0.cdn.deleteMany({
  ids: ['asset_xxx', 'asset_yyy', 'asset_zzz'],
})
 
console.log(`Deleted ${result.deletedCount} assets`)

// Client component
'use client'
 
import { useState } from 'react'
 
export function FileUpload() {
  const [uploading, setUploading] = useState(false)
  const [url, setUrl] = useState<string | null>(null)
 
  async function handleUpload(e: React.ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0]
    if (!file) return
 
    setUploading(true)
 
    try {
      // Get upload URL from your API
      const res = await fetch('/api/upload', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          filename: file.name,
          mimeType: file.type,
          size: file.size,
        }),
      })
      const { uploadUrl, assetId, cdnUrl } = await res.json()
 
      // Upload to S3
      await fetch(uploadUrl, {
        method: 'PUT',
        body: file,
        headers: { 'Content-Type': file.type },
      })
 
      // Confirm upload
      await fetch('/api/upload/confirm', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ assetId }),
      })
 
      setUrl(cdnUrl)
    } finally {
      setUploading(false)
    }
  }
 
  return (
    <div>
      <input type="file" onChange={handleUpload} disabled={uploading} />
      {uploading && <p>Uploading...</p>}
      {url && <img src={url} alt="Uploaded" />}
    </div>
  )
}