Client Configuration

const { uploadFiles } = upload.imageUpload

// Simple upload
const results = await uploadFiles(selectedFiles)
console.log('Uploaded files:', results)

const { uploadFiles } = upload.imageUpload

await uploadFiles(selectedFiles, {
  onProgress: (progress) => {
    console.log(`Upload ${progress.percentage}% complete`)
    updateProgressBar(progress.percentage)
  },

  onSuccess: (results) => {
    console.log('Upload successful!', results)
    showSuccessNotification()
  },

  onError: (error) => {
    console.error('Upload failed:', error)
    showErrorNotification(error.message)
  }
})

const { uploadFiles } = upload.documentUpload

// Pass metadata as second parameter (not in options)
await uploadFiles(selectedFiles, {
  category: 'contracts',
  department: 'legal',
  priority: 'high',
  tags: ['confidential', 'urgent'],
  projectId: currentProject.id,
  uploadedBy: currentUser.email
})

const { uploadFiles } = upload.videoUpload
const abortController = new AbortController()

// Start upload
const uploadPromise = uploadFiles(selectedFiles, {
  abortSignal: abortController.signal,
  onProgress: (progress) => {
    if (progress.percentage > 50 && shouldCancel) {
      abortController.abort()
    }
  }
})

// Cancel upload after 10 seconds
setTimeout(() => abortController.abort(), 10000)

try {
  await uploadPromise
} catch (error) {
  if (error.name === 'AbortError') {
    console.log('Upload was cancelled')
  }
}

import { useUpload } from 'pushduck/client'
import type { AppRouter } from '@/lib/upload'

export function ImageUploadComponent() {
  const { uploadFiles, files, isUploading, error, reset } = useUpload<AppRouter>('imageUpload', {
    onSuccess: (results) => {
      console.log('Upload completed:', results)
    },
    onError: (error) => {
      console.error('Upload failed:', error)
    }
  })

  return (
    <div>
      <input
        type="file"
        multiple
        onChange={(e) => uploadFiles(Array.from(e.target.files || []))}
        disabled={isUploading}
      />

      {files.map(file => (
        <div key={file.id}>
          <span>{file.name}</span>
          <progress value={file.progress} max={100} />
          {file.status === 'error' && <span>Failed: {file.error}</span>}
          {file.status === 'success' && <a href={file.url}>View</a>}
        </div>
      ))}

      <button onClick={reset} disabled={isUploading}>
        Reset
      </button>
    </div>
  )
}

export function MultiUploadComponent() {
  const images = useUpload<AppRouter>('imageUpload')
  const documents = useUpload<AppRouter>('documentUpload')

  return (
    <div>
      <div>
        <h3>Images</h3>
        <input
          type="file"
          accept="image/*"
          multiple
          onChange={(e) => images.uploadFiles(Array.from(e.target.files || []))}
        />
        {/* Render images.files */}
      </div>

      <div>
        <h3>Documents</h3>
        <input
          type="file"
          accept=".pdf,.doc,.docx"
          onChange={(e) => documents.uploadFiles(Array.from(e.target.files || []))}
        />
        {/* Render documents.files */}
      </div>
    </div>
  )
}

import { useUpload } from 'pushduck/client'
import { useCallback } from 'react'
import type { AppRouter } from '@/lib/upload'

export function useImageUpload() {
  const upload = useUpload<AppRouter>('imageUpload', {
    onSuccess: (results) => {
      // Show success toast
      toast.success(`Uploaded ${results.length} images`)
    },
    onError: (error) => {
      // Show error toast
      toast.error(`Upload failed: ${error.message}`)
    }
  })

  const uploadImages = useCallback(async (files: File[]) => {
    // Validate files before upload
    const validFiles = files.filter(file => {
      if (file.size > 5 * 1024 * 1024) { // 5MB
        toast.error(`${file.name} is too large`)
        return false
      }
      return true
    })

    if (validFiles.length > 0) {
      await upload.uploadFiles(validFiles)
    }
  }, [upload.uploadFiles])

  return {
    ...upload,
    uploadImages
  }
}

// app/lib/upload-client.ts
import { createUploadClient } from 'pushduck/client'
import type { AppRouter } from './upload'

export const upload = createUploadClient<AppRouter>({
  endpoint: '/api/upload',
  headers: {
    // Next.js specific headers
    'x-requested-with': 'pushduck'
  }
})

// app/components/upload-form.tsx
'use client'

import { upload } from '@/lib/upload-client'

export function UploadForm() {
  const { uploadFiles, files, isUploading } = upload.imageUpload

  // Component implementation...
}

// src/lib/upload-client.ts
import { createUploadClient } from 'pushduck/client'
import type { AppRouter } from './upload'

export const upload = createUploadClient<AppRouter>({
  endpoint: process.env.REACT_APP_UPLOAD_ENDPOINT || '/api/upload'
})

// src/components/UploadForm.tsx
import React from 'react'
import { upload } from '../lib/upload-client'

export function UploadForm() {
  const { uploadFiles, files, isUploading } = upload.imageUpload

  // Component implementation...
}

// lib/upload-client.ts
import { createUploadClient } from '@pushduck/vue'
import type { AppRouter } from './upload'

export const upload = createUploadClient<AppRouter>({
  endpoint: '/api/upload'
})

// components/UploadForm.vue
<script setup lang="ts">
import { upload } from '@/lib/upload-client'

const { uploadFiles, files, isUploading } = upload.imageUpload
// Vue 3 Composition API with full type safety
</script>

// lib/upload-client.ts
import { uploadStore } from '@pushduck/svelte'
import type { AppRouter } from './upload'

export const upload = uploadStore<AppRouter>('/api/upload')

// components/UploadForm.svelte
<script lang="ts">
import { upload } from '../lib/upload-client'

// Reactive stores
$: ({ files, isUploading } = $upload.imageUpload)
</script>