Pushduck

https://pushduck.dev/docs
Admin
Pushduck is a lightweight S3 file upload library that enables direct-to-S3 uploads with zero vendor...
Tokens:233,180
Snippets:1,580
Trust Score:4.8
Update:7 months ago
Show doc for...
Tokens:
Raw
### Self-Hosted Deno Application Setup (Shell)

Source: https://pushduck.dev/docs/integrations/fresh

Instructions for setting up and running the Deno application on a self-hosted environment. It includes cloning the repository, navigating to the directory, and starting the application using `deno task start`. Assumes Deno is installed.

```bash
# Install Deno
curl -fsSL https://deno.land/install.sh | sh

# Clone and run your app
git clone <your-repo>
cd <your-app>
deno task start
```

--------------------------------

### Initialize Pushduck CLI Setup

Source: https://pushduck.dev/docs/api/cli

This command initiates the interactive setup process for Pushduck. It automatically detects your package manager, installs dependencies, sets up your storage provider, generates type-safe code, and configures environment variables. It's the recommended way to get started.

```bash
npx @pushduck/cli@latest init
```

--------------------------------

### Pushduck CLI Init Example: Components Only

Source: https://pushduck.dev/docs/api/cli

An example of initializing the Pushduck CLI with the `--skip-examples` option to prevent the generation of example components, allowing for a more minimal setup focused solely on the core upload functionality.

```bash
npx @pushduck/cli@latest init --skip-examples
```

--------------------------------

### Dockerfile for SolidJS Start Application Deployment

Source: https://pushduck.dev/docs/integrations/solidjs-start

This Dockerfile provides instructions for building and running a SolidJS Start application. It installs production dependencies, copies source code, builds the application, exposes port 3000, and starts the server.

```dockerfile
FROM node:18-alpine as base
WORKDIR /app

# Install dependencies
COPY package*.json ./
RUN npm ci --only=production

# Copy source code
COPY . .

# Build the app
RUN npm run build

# Expose port
EXPOSE 3000

# Start the app
CMD ["npm", "start"]
```

--------------------------------

### Pushduck CLI Init Example: AWS Direct Setup

Source: https://pushduck.dev/docs/api/cli

An example of initializing the Pushduck CLI with the `--provider` option set to `aws` to directly configure AWS S3 without going through the interactive provider selection.

```bash
npx @pushduck/cli@latest init --provider aws
```

--------------------------------

### Pushduck CLI Interactive Setup - File Generation Output

Source: https://pushduck.dev/docs/api/cli

This output details the files generated by the Pushduck CLI after completing the interactive setup. It lists the created API route, example page, UI components, upload client configuration, and environment variable template. It also confirms dependency installation.

```bash
Generating files...

Created files:
  ├── app/api/upload/route.ts
  ├── app/upload/page.tsx
  ├── components/ui/upload-button.tsx
  ├── components/ui/upload-dropzone.tsx
  ├── lib/upload-client.ts
  └── .env.example

Installing dependencies...
  ✓ pushduck
  ✓ react-dropzone

Setup complete! Your uploads are ready.
```

--------------------------------

### Create Pushduck API Upload Route Handler in SolidJS Start

Source: https://pushduck.dev/docs/integrations/solidjs-start

Implement API routes in SolidJS Start to handle incoming upload requests using the configured pushduck upload router. This example shows how to create GET and POST handlers that delegate to pushduck's handlers.

```typescript
import { APIEvent } from '@solidjs/start/server';
import { uploadRouter } from '~/lib/upload';

export async function GET(event: APIEvent) {
  return uploadRouter.handlers(event.request);
}

export async function POST(event: APIEvent) {
  return uploadRouter.handlers(event.request);
}
```

--------------------------------

### Pushduck CLI Interactive Setup - Provider Selection Prompt

Source: https://pushduck.dev/docs/api/cli

This is an example of the prompt presented by the Pushduck CLI during the interactive setup for selecting a cloud storage provider. It lists several options including Cloudflare R2, AWS S3, DigitalOcean Spaces, Google Cloud Storage, and MinIO.

```bash
? Which cloud storage provider would you like to use?
❯ Cloudflare R2 (recommended)
  AWS S3 (classic, widely supported)
  DigitalOcean Spaces (simple, affordable)
  Google Cloud Storage (enterprise-grade)
  MinIO (self-hosted, open source)
  Custom S3-compatible endpoint
```

--------------------------------

### Development Build Setup

Source: https://pushduck.dev/docs/integrations/expo

Instructions for setting up a development build, including installing the dev client, creating a development build using EAS, and running the application locally on iOS or Android.

```bash
# Install dev client
npx expo install expo-dev-client

# Create development build
eas build --profile development

# Or run locally
npx expo run:ios --configuration Release
npx expo run:android --variant release
```

--------------------------------

### Install Latest Pushduck Version (bun)

Source: https://pushduck.dev/docs/guides/migrate-to-enhanced-client

Installs the latest version of the pushduck package using bun. This command ensures you are using the most recent version for migration.

```bash
bun add pushduck@latest
```

--------------------------------

### Install Latest Pushduck Version (npm)

Source: https://pushduck.dev/docs/guides/migrate-to-enhanced-client

Installs the latest version of the pushduck package using npm. This is the first step in migrating to the enhanced client.

```bash
npm install pushduck@latest
```

--------------------------------

### Configure Netlify Deployment for SolidJS Start

Source: https://pushduck.dev/docs/integrations/solidjs-start

This configuration snippet sets up the SolidJS Start application to deploy to Netlify. It specifies the server preset as 'netlify' within the app.config.ts file.

```typescript
import { defineConfig } from '@solidjs/start/config';

export default defineConfig({
  server: {
    preset: 'netlify'
  }
});
```

--------------------------------

### Run Hono Server with Bun

Source: https://pushduck.dev/docs/integrations/hono

Example of running a Hono application using Bun. This setup is suitable for local development or deployment in environments that support Bun. It uses the '@hono/node-server' for serving.

```typescript
import { Hono } from 'hono';
import { uploadRouter } from './lib/upload';

const app = new Hono();

app.all('/api/upload/*', (c) => uploadRouter.handlers(c.req.raw));

export default {
  port: 3000,
  fetch: app.fetch,
};

```

```bash
# Run with Bun
bun run server.ts

```

--------------------------------

### API Route Example for File Operations

Source: https://pushduck.dev/docs/api/storage/quick-reference

Illustrates how to integrate Pushduck storage operations within an API route handler. This example shows handling GET requests to list files and DELETE requests to remove a file by its key.

```typescript
//app/api/files/route.ts
import { storage } from '@/lib/upload'

export async function GET() {
  const files = await storage.list.files()
  return Response.json({ files })
}

export async function DELETE(request: Request) {
  const { key } = await request.json()
  const result = await storage.delete.file(key)
  return Response.json(result)
}
```

--------------------------------

### Configure Node.js Server Deployment for SolidJS Start

Source: https://pushduck.dev/docs/integrations/solidjs-start

This configuration snippet sets up the SolidJS Start application to deploy to a generic Node.js server. It specifies the server preset as 'node-server' within the app.config.ts file.

```typescript
import { defineConfig } from '@solidjs/start/config';

export default defineConfig({
  server: {
    preset: 'node-server'
  }
});
```

--------------------------------

### Configure Vercel Deployment for SolidJS Start

Source: https://pushduck.dev/docs/integrations/solidjs-start

This configuration snippet sets up the SolidJS Start application to deploy to Vercel. It specifies the server preset as 'vercel' within the app.config.ts file.

```typescript
import { defineConfig } from '@solidjs/start/config';

export default defineConfig({
  server: {
    preset: 'vercel'
  }
});
```

--------------------------------

### Advanced Pushduck Configuration with Custom Paths and Hooks (TypeScript)

Source: https://pushduck.dev/docs/api/configuration

Demonstrates an advanced pushduck setup using AWS S3, with custom path generation logic and lifecycle hooks for onUploadStart and onUploadComplete. This allows for dynamic file organization and custom post-upload actions.

```typescript
export const { s3, storage } = createUploadConfig()
  .provider("aws", { /* credentials */ })
  .defaults({
    maxFileSize: '100MB',
    acl: 'private',
  })
  .paths({
    prefix: 'uploads',
    generateKey: (file, metadata) => {
      const userId = metadata.userId || 'anonymous'
      const timestamp = Date.now()
      return `${userId}/${timestamp}/${file.name}`
    },
  })
  .hooks({
    onUploadStart: async ({ file, metadata }) => {
      console.log(`Starting upload: ${file.name}`)
    },
    onUploadComplete: async ({ file, url, metadata }) => {
      await saveToDatabase({ file, url, userId: metadata.userId })
    },
  })
  .build()
```

--------------------------------

### Configure Netlify Deployment with TanStack Start

Source: https://pushduck.dev/docs/integrations/tanstack-start

This configuration sets up TanStack Start for deployment on Netlify. It specifies the server preset to 'netlify'. No external dependencies are required beyond TanStack Start.

```typescript
import { defineConfig } from '@tanstack/start/config';

export default defineConfig({
  server: {
    preset: 'netlify'
  }
});
```

--------------------------------

### Pushduck CLI Interactive Setup - API Configuration Prompt

Source: https://pushduck.dev/docs/api/cli

This prompt from the Pushduck CLI allows the user to configure the location of the upload API route. It suggests the default `app/api/upload/route.ts` for Next.js App Router but also offers alternative paths and a custom option. It also asks whether to generate an example upload page.

```bash
? Where should we create the upload API?
❯ app/api/upload/route.ts (recommended)
  app/api/s3-upload/route.ts (classic)
  Custom path

? Generate example upload page? 
❯ Yes, create app/upload/page.tsx with full example
  Yes, just add components to components/ui/
  No, I'll build my own
```

--------------------------------

### Install Latest Pushduck Version (pnpm)

Source: https://pushduck.dev/docs/guides/migrate-to-enhanced-client

Installs the latest version of the pushduck package using pnpm. Ensure you have the latest version before proceeding with the migration.

```bash
pnpm add pushduck@latest
```

--------------------------------

### Framework Support - Pure JavaScript

Source: https://pushduck.dev/docs/roadmap

Demonstrates the basic usage of Pushduck's core client in a pure JavaScript environment. This example shows how to initialize the client, initiate an upload, and listen for progress and completion events.

```javascript
// Pure JavaScript
import { UploadClient } from '@pushduck/core'

const client = new UploadClient('/api/upload')

client.upload('imageUpload', files)
  .on('progress', (progress) => console.log(progress))
  .on('complete', (urls) => console.log(urls))
```

--------------------------------

### Install Latest Pushduck Version (yarn)

Source: https://pushduck.dev/docs/guides/migrate-to-enhanced-client

Installs the latest version of the pushduck package using yarn. This is a prerequisite for using the enhanced client features.

```bash
yarn add pushduck@latest
```

--------------------------------

### Pushduck Server and Client Setup for Uploads

Source: https://pushduck.dev/docs/comparisons

Shows the concise server-side setup using Pushduck's `s3.createRouter` for defining upload routes and the client-side hook `useUploadRoute` for managing upload state and functionality. This approach significantly reduces boilerplate code.

```javascript
// Server (3 lines)
const router = s3.createRouter({
  imageUpload: s3.image().maxFileSize('5MB'),
});
export const { GET, POST } = router.handlers;

// Client (1 line)
const { uploadFiles, progress, isUploading } = useUploadRoute('imageUpload');
```

--------------------------------

### Basic Storage Setup

Source: https://pushduck.dev/docs/api/storage

Set up the Pushduck storage provider, such as Cloudflare R2, by configuring credentials and bucket information.

```APIDOC
## Basic Storage Setup

```typescript
// lib/upload.ts
import { createUploadConfig } from 'pushduck/server'

const { storage } = createUploadConfig()
  .provider("cloudflareR2", {
    accessKeyId: process.env.AWS_ACCESS_KEY_ID,
    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
    accountId: process.env.R2_ACCOUNT_ID,
    bucket: process.env.S3_BUCKET_NAME,
  })
  .build()

export { storage }
```
```

--------------------------------

### Create Pushduck API Upload Route Handler in TanStack Start

Source: https://pushduck.dev/docs/integrations/tanstack-start

Defines the API route handler for uploads in TanStack Start, using the configured pushduck upload router. It processes GET and POST requests to handle file uploads.

```typescript
import { createAPIFileRoute } from '@tanstack/start/api';
import { uploadRouter } from '../lib/upload';

export const Route = createAPIFileRoute('/api/upload/$')({
  GET: ({ request }) => uploadRouter.handlers(request),
  POST: ({ request }) => uploadRouter.handlers(request),
});
```

--------------------------------

### Pushduck CLI Interactive Setup - Cloudflare R2 Credential Setup

Source: https://pushduck.dev/docs/api/cli

This output shows the process of setting up credentials for Cloudflare R2. The CLI checks for existing environment variables and prompts the user for the bucket name if it's not found, offering to create the bucket automatically.

```bash
Setting up Cloudflare R2...

🔍 Checking for existing credentials...
  ✓ Found CLOUDFLARE_R2_ACCESS_KEY_ID
  ✓ Found CLOUDFLARE_R2_SECRET_ACCESS_KEY
  ✓ Found CLOUDFLARE_R2_ACCOUNT_ID
  ⚠ CLOUDFLARE_R2_BUCKET_NAME not found

? Enter your R2 bucket name: my-app-uploads
? Create bucket automatically? Yes
```

--------------------------------

### Pushduck API Route Handler with Individual Methods in SolidJS Start

Source: https://pushduck.dev/docs/integrations/solidjs-start

An alternative method for creating API routes in SolidJS Start that explicitly handles GET and POST requests by calling specific methods on the pushduck upload router's handlers. This provides more granular control.

```typescript
import { APIEvent } from '@solidjs/start/server';
import { uploadRouter } from '~/lib/upload';

// Method 1: Individual handlers
export async function GET(event: APIEvent) {
  return uploadRouter.handlers.GET(event.request);
}

export async function POST(event: APIEvent) {
  return uploadRouter.handlers.POST(event.request);
}

// Method 2: Combined handler (alternative approach)
// export async function handler(event: APIEvent) {
//   return uploadRouter.handlers(event.request);
// }
```

--------------------------------

### Create Protected API Routes for Uploads with TanStack Start

Source: https://pushduck.dev/docs/integrations/tanstack-start

Defines API routes for handling uploads using TanStack Start. It includes an authentication middleware to protect GET and POST requests, ensuring only authorized users can access these endpoints. The route handlers delegate to the Pushduck upload router.

```typescript
import { createAPIFileRoute } from '@tanstack/start/api';
import { uploadRouter } from '../lib/upload';

// Authentication middleware
async function requireAuth(request: Request) {
  const authHeader = request.headers.get('authorization');
  if (!authHeader?.startsWith('Bearer ')) {
    throw new Response(JSON.stringify({ error: 'Authorization required' }), {
      status: 401,
      headers: { 'Content-Type': 'application/json' }
    });
  }
  
  const token = authHeader.substring(7);
  // Verify token logic here
  return { userId: 'user-123' };
}

export const Route = createAPIFileRoute('/api/upload/$')({
  GET: async ({ request }) => {
    await requireAuth(request);
    return uploadRouter.handlers.GET(request);
  },
  POST: async ({ request }) => {
    await requireAuth(request);
    return uploadRouter.handlers.POST(request);
  },
});
```

--------------------------------

### Basic Server Setup

Source: https://pushduck.dev/docs/api

Demonstrates how to set up a basic S3 upload router on the server using Pushduck.

```APIDOC
## Basic Server Setup

### Description
Configure the server-side upload router for S3 storage with defined upload routes.

### Method
POST, GET (handled by the router)

### Endpoint
`/api/upload` (example, configurable)

### Parameters
#### Query Parameters
- `route` (string) - Required - The name of the upload route defined in the configuration.

#### Request Body
- `file` (File) - Required - The file to be uploaded.

### Request Example
```javascript
// Client-side upload initiation
const formData = new FormData();
formData.append('file', file);

fetch('/api/upload?route=imageUpload', {
  method: 'POST',
  body: formData,
});
```

### Response
#### Success Response (200)
- `url` (string) - The permanent public URL of the uploaded file.
- `presignedUrl` (string) - A temporary URL for downloading the file (valid for 1 hour).

#### Response Example
```json
{
  "url": "https://your-bucket.s3.amazonaws.com/path/to/your/file.jpg",
  "presignedUrl": "https://your-bucket.s3.amazonaws.com/path/to/your/file.jpg?AWSAccessKeyId=...&Expires=...&Signature=..."
}
```

### Server Configuration Example
```typescript
import { createS3Router, s3 } from 'pushduck/server';

const uploadRouter = createS3Router({
  storage: {
    provider: 'aws-s3',
    region: 'us-east-1',
    bucket: 'my-bucket',
    credentials: {
      accessKeyId: process.env.AWS_ACCESS_KEY_ID!,
      secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY!,
    },
  },
  routes: {
    imageUpload: s3.image().maxFileSize("5MB"),
    documentUpload: s3.file().maxFileSize("10MB"),
  },
});

export const { GET, POST } = uploadRouter.handlers;
```
```

--------------------------------

### Protected API Routes

Source: https://pushduck.dev/docs/integrations/solidjs-start

Handles GET and POST requests for protected upload routes, ensuring authentication before processing.

```APIDOC
## GET /api/upload/[...path]

### Description
Retrieves a file from the protected upload path. Requires authentication.

### Method
GET

### Endpoint
/api/upload/[...path]

### Parameters
#### Path Parameters
- **path** (string) - Required - The path to the file to retrieve.

#### Query Parameters
None

#### Request Body
None

### Request Example
GET /api/upload/uploads/user-123/1678886400000/example.jpg

### Response
#### Success Response (200)
- **file content** (binary) - The content of the requested file.

#### Response Example
(Binary file content)
```

```APIDOC
## POST /api/upload/[...path]

### Description
Handles POST requests for protected upload routes, typically for uploading files. Requires authentication.

### Method
POST

### Endpoint
/api/upload/[...path]

### Parameters
#### Path Parameters
- **path** (string) - Required - The path where the file should be uploaded.

#### Query Parameters
None

#### Request Body
- **file** (File) - Required - The file to upload.

### Request Example
POST /api/upload/uploads/user-123/
(Form data containing the file)

### Response
#### Success Response (200)
- **url** (string) - The URL of the uploaded file.

#### Response Example
{
  "url": "/uploads/user-123/1678886400000/another-example.jpg"
}
```

--------------------------------

### Pushduck CLI Init Example: Custom API Path

Source: https://pushduck.dev/docs/api/cli

This example demonstrates how to use the `--api-path` option with the Pushduck CLI's `init` command to specify a custom route for your upload API, deviating from the default `/api/upload`.

```bash
npx @pushduck/cli@latest init --api-path /api/custom-upload
```

--------------------------------

### Framework Support - Svelte Stores

Source: https://pushduck.dev/docs/roadmap

Shows how to integrate Pushduck with Svelte using stores. This example illustrates setting up an upload client and accessing reactive upload state through Svelte's store mechanism.

```javascript
// Svelte stores
import { uploadStore } from '@pushduck/svelte'

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

// Reactive stores for upload state
$: ({ files, isUploading } = $upload.imageUpload)
```

--------------------------------

### Pushduck CLI Init Command Options

Source: https://pushduck.dev/docs/api/cli

The `init` command for the Pushduck CLI supports several options to customize the setup process. You can specify the provider, skip bucket creation, set a custom API path, and more. The `--dry-run` option shows what would be created without making changes.

```bash
npx @pushduck/cli@latest init [options]
```

--------------------------------

### Pushduck S3 Configuration in TypeScript

Source: https://pushduck.dev/docs/providers/aws-s3

Example of how to configure the AWS S3 provider within your Pushduck setup using TypeScript. It demonstrates setting up credentials, region, bucket name, and an optional custom domain, along with default upload settings.

```typescript
// lib/upload.ts
import { createUploadConfig } from "pushduck/server";

export const { s3, config } = createUploadConfig()
  .provider("aws", {
    accessKeyId: process.env.AWS_ACCESS_KEY_ID!,
    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY!,
    region: process.env.AWS_REGION!,
    bucket: process.env.AWS_S3_BUCKET_NAME!,
    // Optional: Custom domain for public files
    customDomain: process.env.S3_CUSTOM_DOMAIN,
  })
  .defaults({
    maxFileSize: "10MB",
    acl: "private", // Use 'public-read' for public files
  })
  .build();

export { s3 };
```

--------------------------------

### Start MinIO Server with Docker

Source: https://pushduck.dev/docs/providers/minio

This snippet demonstrates how to quickly start a MinIO server using Docker for local development and testing. It maps ports, mounts a volume for data persistence, and sets root credentials. Access the MinIO console via http://localhost:9001.

```bash
# Create data directory
mkdir -p ~/minio/data

# Start MinIO server
docker run -d \
  --name minio \
  -p 9000:9000 \
  -p 9001:9001 \
  -v ~/minio/data:/data \
  -e "MINIO_ROOT_USER=minioadmin" \
  -e "MINIO_ROOT_PASSWORD=minioadmin123" \
  quay.io/minio/minio server /data --console-address ":9001"
```

--------------------------------

### Pushduck Upload API Endpoint (GET/POST)

Source: https://pushduck.dev/docs/integrations/solidjs-start

Exposes the Pushduck upload functionality via GET and POST requests at the `/api/upload/[...path]` endpoint.

```APIDOC
## Pushduck Upload API Endpoint

### Method
GET, POST

### Endpoint
`/api/upload/[...path]`

### Description
This endpoint handles file uploads configured through Pushduck. It accepts both GET and POST requests and forwards them to the Pushduck upload router for processing. The `[...path]` segment allows for dynamic routing of uploads within the specified structure.

### Request Example
```json
{
  "example": "File upload request data"
}
```

### Response
#### Success Response (200)
- **(response)** (Response) - The result of the upload operation, typically a success message or file metadata.

#### Response Example
```json
{
  "example": "Upload successful: { \"url\": \"...\" }"
}
```
```

--------------------------------

### Migrate ImageUploader Component (Before)

Source: https://pushduck.dev/docs/guides/migrate-to-enhanced-client

Example of an ImageUploader component using the older hook-based Pushduck API (`useUploadRoute`). It demonstrates the string literal approach for specifying routes.

```typescript
import { useUploadRoute } from 'pushduck/client'

export function ImageUploader() {
  const { uploadFiles, files, isUploading } = useUploadRoute('imageUpload')
  
  return (
    <div>
      <input type="file" onChange={(e) => uploadFiles(e.target.files)} />
      {/* Upload UI */}
    </div>
  )
}
```

--------------------------------

### Fetch Documentation Content (Node.js/JavaScript)

Source: https://pushduck.dev/docs/ai-integration

This Node.js/JavaScript example shows how to asynchronously fetch all documentation and specific page content using the `fetch` API. It's suitable for web applications and server-side scripts.

```javascript
// Fetch all documentation
const allDocs = await fetch("/llms.txt").then((r) => r.text());

// Fetch specific page
const quickStart = await fetch("/docs/quick-start.mdx").then((r) => r.text());
```

--------------------------------

### Migrate ImageUploader Component (After)

Source: https://pushduck.dev/docs/guides/migrate-to-enhanced-client

Example of an ImageUploader component migrated to the new property-based Pushduck client API. It uses the imported `upload` client for type-safe access to endpoints.

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

export function ImageUploader() {
  const { uploadFiles, files, isUploading } = upload.imageUpload
  
  return (
    <div>
      <input type="file" onChange={(e) => uploadFiles(e.target.files)} />
      {/* Same upload UI */}
    </div>
  )
}
```

--------------------------------

### Basic Storage Setup with Cloudflare R2

Source: https://pushduck.dev/docs/api/storage

Configures the Pushduck storage provider using Cloudflare R2 with provided credentials. It imports `createUploadConfig` and builds a storage instance.

```typescript
// lib/upload.ts
import { createUploadConfig } from 'pushduck/server'

const { storage } = createUploadConfig()
  .provider("cloudflareR2", {
    accessKeyId: process.env.AWS_ACCESS_KEY_ID,
    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
    accountId: process.env.R2_ACCOUNT_ID,
    bucket: process.env.S3_BUCKET_NAME,
  })
  .build()

export { storage }
```

--------------------------------

### Integrate File Upload Component into Qwik Route (TypeScript)

Source: https://pushduck.dev/docs/integrations/qwik

Demonstrates how to import and use the `FileUpload` component within a Qwik route. This example shows a basic page structure with a title and the file upload interface, setting up the document head for SEO.

```typescript
import { component$ } from '@builder.io/qwik';
import type { DocumentHead } from '@builder.io/qwik-city';
import { FileUpload } from '~/components/file-upload';

export default component$(() => {
  return (
    <main class="container mx-auto px-4 py-8">
      <h1 class="text-3xl font-bold mb-8">File Upload Demo</h1>
      <FileUpload />
    </main>
  );
});

export const head: DocumentHead = {
  title: 'File Upload Demo',
  meta: [
    {
      name: 'description',
      content: 'Qwik file upload demo with pushduck',
    },
  ],
};
```

--------------------------------

### Basic Pushduck S3 Upload Configuration (TypeScript)

Source: https://pushduck.dev/docs/api/configuration

Sets up a basic pushduck configuration for Cloudflare R2, defining provider credentials, default file size, and ACL. This is the starting point for most applications.

```typescript
import { createUploadConfig } from 'pushduck/server'

export const { s3, storage } = createUploadConfig()
  .provider("cloudflareR2", {
    accessKeyId: process.env.AWS_ACCESS_KEY_ID,
    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
    accountId: process.env.R2_ACCOUNT_ID,
    bucket: process.env.S3_BUCKET_NAME,
  })
  .defaults({
    maxFileSize: '10MB',
    acl: 'public-read',
  })
  .build()
```

--------------------------------

### Basic Upload Flow Configuration and Implementation

Source: https://pushduck.dev/docs/guides

Demonstrates how to configure a server router for S3 uploads with validation and implement client-side uploads using hooks. It covers setting up routes for different file types and sizes, initiating uploads, and handling results.

```javascript
const uploadRouter = createS3Router({
  routes: {
    imageUpload: s3.image().maxFileSize("5MB"),
    documentUpload: s3.file().maxFileSize("10MB"),
  },
});

const { upload, uploading, progress } = useUpload({
  endpoint: '/api/upload',
  route: 'imageUpload',
});

const result = await upload(file);
console.log('File uploaded:', result.url);
```

--------------------------------

### Pushduck API Route Handler with Individual Methods

Source: https://pushduck.dev/docs/integrations/tanstack-start

Demonstrates an alternative method for handling API requests by explicitly defining handlers for GET and POST methods using the pushduck upload router.

```typescript
import { createAPIFileRoute } from '@tanstack/start/api';
import { uploadRouter } from '../lib/upload';

export const Route = createAPIFileRoute('/api/upload/$')({
  // Method 1: Individual handlers
  GET: ({ request }) => uploadRouter.handlers.GET(request),
  POST: ({ request }) => uploadRouter.handlers.POST(request),
  
  // Method 2: Universal handler (alternative approach)
  // You could also create a single handler that delegates:
  // handler: ({ request }) => uploadRouter.handlers(request)
});
```

--------------------------------

### Public Upload Configuration

Source: https://pushduck.dev/docs/integrations/solidjs-start

Configuration for public uploads, allowing uploads without authentication.

```APIDOC
## POST /api/upload/public

### Description
Handles public file uploads. No authentication is required. Files are uploaded with a maximum size limit.

### Method
POST

### Endpoint
/api/upload/public

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **file** (File) - Required - The file to upload.

### Request Example
(Form data containing the file)

### Response
#### Success Response (200)
- **url** (string) - The URL of the uploaded file.

#### Response Example
{
  "url": "/uploads/public/1678886400000/example.png"
}
```

--------------------------------

### Create Elysia App with Pushduck Upload Routes

Source: https://pushduck.dev/docs/integrations/elysia

Initializes an Elysia application and integrates Pushduck upload handlers for GET and POST requests to the '/api/upload' endpoint. This is a basic setup without middleware.

```typescript
import { Elysia } from 'elysia';
import { uploadRouter } from './lib/upload';

const app = new Elysia();

// Direct usage - no adapter needed!
app.get('/api/upload', ({ request }) => uploadRouter.handlers.GET(request));
app.post('/api/upload', ({ request }) => uploadRouter.handlers.POST(request));

app.listen(3000);
```

--------------------------------

### Fetch All Documentation (cURL)

Source: https://pushduck.dev/docs/ai-integration

This snippet demonstrates how to download all Pushduck documentation in a single, AI-readable text file using cURL. It's useful for bulk processing or offline analysis.

```bash
curl -o pushduck-docs.txt https://your-domain.com/llms.txt
```

--------------------------------

### Configure File Size Limits in Upload Router

Source: https://pushduck.dev/docs/api/troubleshooting

Adjust the maximum file size allowed for uploads by modifying the `maxFileSize` option in the `s3.createRouter` configuration. This example sets the limit to 10MB and specifies allowed image formats.

```typescript
// app/api/upload/route.ts
const uploadRouter = s3.createRouter({
  imageUpload: s3
    .image()
    .maxFileSize("10MB") // Increase as needed
    .formats(["jpeg", "png", "webp"]),
});
```

--------------------------------

### MinIO SSL/TLS Setup with Certbot

Source: https://pushduck.dev/docs/providers/minio

This command installs Certbot and its Nginx plugin, then obtains SSL/TLS certificates for the MinIO API and console endpoints using Let's Encrypt. This ensures secure communication with your MinIO instance.

```bash
# Install Certbot
sudo apt install certbot python3-certbot-nginx

# Get SSL certificates
sudo certbot --nginx -d uploads.yourdomain.com
sudo certbot --nginx -d minio-console.yourdomain.com
```

--------------------------------

### SolidJS Home Page with Navigation

Source: https://pushduck.dev/docs/integrations/solidjs-start

A simple home page for the SolidJS application that greets the user and provides a link to the upload demo. It uses `@solidjs/router` for navigation and `@solidjs/meta` for setting the page title. The page features a prominent heading, a descriptive paragraph, and a call-to-action button.

```typescript
import { A } from '@solidjs/router';
import { Title } from '@solidjs/meta';

export default function Home() {
  return (
    <>
      <Title>SolidJS Start + Pushduck</Title>
      <div class="container mx-auto px-4 py-8">
        <div class="text-center">
          <h1 class="text-4xl font-bold text-gray-900 mb-4">
            SolidJS Start + Pushduck
          </h1>
          <p class="text-xl text-gray-600 mb-8">
            High-performance file uploads with SolidJS
          </p>
          <A 
            href="/upload" 
            class="inline-block bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors"
          >
            Try Upload Demo
          </A>
        </div>
      </div>
    </>
  );
}

```
Tokens:
Raw