File storage

const { files } = await createClient<Database>({
  config: { apiUrl: import.meta.env.VITE_FFDB_API_URL },
})

const record = await files.upload(fileInput, {
  folderPath: '/avatars',
  visibility: 'private',
  privacy: 'org',
})

console.log(record.id, record.name, record.size_bytes)

await files.upload(file, {
  name: 'profile.jpg',
  folderPath: '/users/avatars',
  visibility: 'public',
  privacy: 'org',
  description: 'User profile photo',
  compress: true,
  compressOptions: { maxWidth: 1200, maxHeight: 1200, quality: 0.8 },
})

const { url, expiresAt, public: isPublic } = await files.getUrl(record.id)

const { files: fileList, total } = await files.list('/documents')

await files.update(record.id, {
  name: 'renamed-photo.jpg',
  description: 'Updated description',
  folder_path: '/photos/2024',
})

await files.delete(record.id)

const photos = await db
  .selectFrom('files')
  .select(['id', 'name', 'size_bytes', 'mime_type'])
  .where('folder_path', '=', '/photos')
  .where('status', '=', 'confirmed')
  .orderBy('created_at desc')
  .execute()

import { useFileUrl } from 'ffdb-client/react'

function Avatar({ fileId }: { fileId: string }) {
  const { url, isLoading, error } = useFileUrl(fileId)

  if (isLoading) return <Skeleton />
  if (error) return <span>Failed to load</span>
  return <img src={url!} alt="avatar" />
}

const { url } = useFileUrl(fileId, {
  refreshBeforeExpiryMs: 120_000, // refresh 2 min before expiry
})

import { useFileList } from 'ffdb-client/react'

function DocumentList() {
  const { files, total, isLoading, error, refetch } = useFileList('/documents')

  if (isLoading) return <Spinner />
  return (
    <ul>
      {files.map(file => (
        <li key={file.id}>{file.name} ({file.size_bytes} bytes)</li>
      ))}
    </ul>
  )
}

useFileList('/photos', {
  enabled: isAuthenticated,
  refetchOnFocus: true,     // default: true
  refetchInterval: 30_000,  // poll every 30s
})

import { useUpload } from 'ffdb-client/react'

function UploadButton() {
  const { upload, isUploading, error, lastUpload } = useUpload()

  const onFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (!file) return

    try {
      const record = await upload(file, {
        folderPath: '/uploads',
        compress: true,
      })
      console.log('Uploaded:', record.id)
    } catch {
      // error is also available via the hook's error state
    }
  }

  return (
    <div>
      <input type="file" onChange={onFileChange} disabled={isUploading} />
      {isUploading && <span>Uploading...</span>}
      {error && <span>Error: {error.message}</span>}
      {lastUpload && <span>Last upload: {lastUpload.name}</span>}
    </div>
  )
}

import { useFiles } from 'ffdb-client/react'

function DeleteButton({ fileId }: { fileId: string }) {
  const files = useFiles()

  return (
    <button onClick={() => files.delete(fileId)}>
      Delete
    </button>
  )
}

import { useFileList, useFileUrl, useUpload } from 'ffdb-client/react'

function FileGallery() {
  const { files, refetch } = useFileList('/photos')
  const { upload, isUploading } = useUpload()

  const onUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (!file) return
    await upload(file, { folderPath: '/photos', compress: true })
    refetch()
  }

  return (
    <div>
      <input type="file" accept="image/*" onChange={onUpload} disabled={isUploading} />
      <div className="grid grid-cols-3 gap-2">
        {files.map(file => (
          <GalleryImage key={file.id} fileId={file.id} name={file.name} />
        ))}
      </div>
    </div>
  )
}

function GalleryImage({ fileId, name }: { fileId: string; name: string }) {
  const { url, isLoading } = useFileUrl(fileId)
  if (isLoading || !url) return <Skeleton />
  return <img src={url} alt={name} />
}

import { useFFDB, useUpload } from 'ffdb-client/react'

function OfflineAwareUpload() {
  const { sync } = useFFDB()
  const { upload, isUploading, error } = useUpload()
  const isOnline = sync?.status.isOnline ?? true

  return (
    <div>
      <input
        type="file"
        onChange={e => {
          const file = e.target.files?.[0]
          if (file) upload(file, { folderPath: '/uploads' })
        }}
        disabled={isUploading || !isOnline}
      />
      {!isOnline && <p>File uploads are unavailable while offline.</p>}
      {error && <p>{error.message}</p>}
    </div>
  )
}

await files.upload(largePhoto, {
  compress: true,
  compressOptions: {
    maxWidth: 1920,
    maxHeight: 1080,
    quality: 0.85,
  },
})

import { FileStorageError } from 'ffdb-client'

try {
  await files.upload(file)
} catch (err) {
  if (err instanceof FileStorageError) {
    switch (err.code) {
      case 'FILE_UPLOAD_DISABLED':
        // Admin hasn't enabled file storage yet
        break
      case 'S3_ERROR':
        // S3 credentials or bucket misconfigured
        break
      case 'OFFLINE':
        // No network connection
        break
      case 'FILE_TOO_LARGE':
        // File exceeds max size
        break
      case 'MIME_TYPE_NOT_ALLOWED':
        // File type not in the allowed list
        break
      case 'PERMISSION_DENIED':
        // User lacks folder permission
        break
      case 'STORAGE_LIMIT_EXCEEDED':
        // Org storage quota full
        break
      case 'S3_UPLOAD_FAILED':
        // Presigned URL expired or S3 rejected the upload
        break
    }
  }
}