Fresh

import { Handlers } from "$fresh/server.ts";
import { uploadRouter } from "../../../lib/upload.ts";

// Method 1: Combined handler (recommended)
export const handler: Handlers = {
  async GET(req) {
    return uploadRouter.handler(req);
  },
  async POST(req) {
    return uploadRouter.handler(req);
  },
};

// Method 2: Universal handler
export const handler: Handlers = {
  async GET(req) {
    return uploadRouter.handler(req);
  },
  async POST(req) {
    return uploadRouter.handler(req);
  },
  async OPTIONS(req) {
    return new Response(null, {
      status: 200,
      headers: {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
        'Access-Control-Allow-Headers': 'Content-Type',
      },
    });
  },
};

import { MiddlewareHandlerContext } from "$fresh/server.ts";

export async function handler(
  req: Request,
  ctx: MiddlewareHandlerContext,
) {
  // Add CORS headers for upload routes
  if (ctx.destination === "route" && req.url.includes("/api/upload")) {
    const response = await ctx.next();
    response.headers.set("Access-Control-Allow-Origin", "*");
    response.headers.set("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
    response.headers.set("Access-Control-Allow-Headers", "Content-Type");
    return response;
  }
  
  return ctx.next();
}

import { createUploadConfig } from 'pushduck/server';
import { getCookies } from "https://deno.land/std@0.208.0/http/cookie.ts";

const { s3, createS3Router } = createUploadConfig()
  .provider("cloudflareR2",{
    accessKeyId: Deno.env.get("AWS_ACCESS_KEY_ID")!,
    secretAccessKey: Deno.env.get("AWS_SECRET_ACCESS_KEY")!,
    region: 'auto',
    endpoint: Deno.env.get("AWS_ENDPOINT_URL")!,
    bucket: Deno.env.get("S3_BUCKET_NAME")!,
    accountId: Deno.env.get("R2_ACCOUNT_ID")!,
  })
  .paths({
    prefix: 'uploads',
    generateKey: (file, metadata) => {
      return `${metadata.userId}/${Date.now()}/${file.name}`;
    }
  })
  .build();

export const uploadRouter = createS3Router({
  // Private uploads with cookie-based authentication
  privateUpload: s3
    .image()
    .maxFileSize("5MB")
    .middleware(async ({ req }) => {
      const cookies = getCookies(req.headers);
      const sessionId = cookies.sessionId;
      
      if (!sessionId) {
        throw new Error('Authentication required');
      }
      
      const user = await getUserFromSession(sessionId);
      if (!user) {
        throw new Error('Invalid session');
      }
      
      return {
        userId: user.id,
        username: user.username,
      };
    }),

  // Public uploads (no auth)
  publicUpload: s3
    .image()
    .maxFileSize("2MB")
    // No middleware = public access
});

export type AppUploadRouter = typeof uploadRouter;

// Helper function
async function getUserFromSession(sessionId: string) {
  // Implement your session validation logic
  // This could connect to a database, Deno KV, etc.
  return { id: 'user-123', username: 'demo-user' };
}

import { createUploadEngine } from "pushduck/core";

const engine = createUploadEngine({
  endpoint: "/api/upload",
  route: "imageUpload",
});

engine.subscribe(() => {
  const { files, progress, isUploading, errors } = engine.getSnapshot();
  // render however your framework prefers
});

await engine.upload([...fileInput.files]);

import { useEffect, useRef, useState } from "preact/hooks";
import {
  createUploadEngine,
  type UploadEngine,
  type UploadEngineState,
} from "pushduck/core";

export default function FileUpload() {
  const engineRef = useRef<UploadEngine | null>(null);
  const [state, setState] = useState<UploadEngineState | null>(null);

  useEffect(() => {
    const engine = createUploadEngine({
      endpoint: "/api/upload",
      route: "imageUpload",
      onError: (error) => console.error("Upload failed:", error),
    });

    engineRef.current = engine;
    setState(engine.getSnapshot());

    // subscribe() returns its own unsubscribe — hand it straight back.
    return engine.subscribe(() => setState(engine.getSnapshot()));
  }, []);

  if (!state) return <p>Loading…</p>;

  return (
    <div class="space-y-4">
      <input
        type="file"
        multiple
        accept="image/*"
        disabled={state.isUploading}
        onChange={(e) =>
          engineRef.current?.upload([
            ...((e.target as HTMLInputElement).files ?? []),
          ])
        }
      />

      {state.isUploading && <progress value={state.progress} max={100} />}

      {state.files.map((file) => (
        <div key={file.id} class="flex gap-2 items-center">
          <span>{file.name}</span>
          <span>
            {file.status} ({file.progress}%)
          </span>
          {file.status === "uploading" && (
            <button onClick={() => engineRef.current?.cancel(file.id)}>
              Cancel
            </button>
          )}
        </div>
      ))}
    </div>
  );
}

await engine.upload(files, { albumId: "vacation-2026", visibility: "private" });

import { Handlers } from "$fresh/server.ts";

export const handler: Handlers = {
  async GET(req) {
    const url = new URL(req.url);
    const userId = url.searchParams.get('userId');
    
    if (!userId) {
      return new Response(JSON.stringify({ error: 'User ID required' }), {
        status: 400,
        headers: { 'Content-Type': 'application/json' }
      });
    }
    
    // Fetch files from database/Deno KV
    const files = await getFilesForUser(userId);
    
    return new Response(JSON.stringify({
      files: files.map(file => ({
        id: file.id,
        name: file.name,
        url: file.url,
        size: file.size,
        uploadedAt: file.createdAt,
      })),
    }), {
      headers: { 'Content-Type': 'application/json' }
    });
  },
};

async function getFilesForUser(userId: string) {
  // Example using Deno KV
  const kv = await Deno.openKv();
  const files = [];
  
  for await (const entry of kv.list({ prefix: ["files", userId] })) {
    files.push(entry.value);
  }
  
  return files;
}

import { Head } from "$fresh/runtime.ts";
import { Handlers, PageProps } from "$fresh/server.ts";
import FileUpload from "../islands/FileUpload.tsx";

interface FileData {
  id: string;
  name: string;
  url: string;
  size: number;
  uploadedAt: string;
}

interface PageData {
  files: FileData[];
}

export const handler: Handlers<PageData> = {
  async GET(req, ctx) {
    // Fetch files for current user
    const files = await getFilesForUser("current-user");
    
    return ctx.render({ files });
  },
};

export default function FilesPage({ data }: PageProps<PageData>) {
  function formatFileSize(bytes: number): string {
    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
    if (bytes === 0) return '0 Bytes';
    const i = Math.floor(Math.log(bytes) / Math.log(1024));
    return Math.round(bytes / Math.pow(1024, i) * 100) / 100 + ' ' + sizes[i];
  }

  return (
    <>
      <Head>
        <title>My Files</title>
      </Head>
      <main class="container mx-auto px-4 py-8">
        <h1 class="text-3xl font-bold mb-8">My Files</h1>
        
        <div class="mb-8">
          <FileUpload />
        </div>
        
        <div>
          <h2 class="text-2xl font-semibold mb-4">Uploaded Files</h2>
          
          {data.files.length === 0 ? (
            <p class="text-gray-500">No files uploaded yet.</p>
          ) : (
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              {data.files.map((file) => (
                <div key={file.id} class="border rounded-lg p-4 hover:shadow-md transition-shadow">
                  <h3 class="font-medium truncate" title={file.name}>
                    {file.name}
                  </h3>
                  <p class="text-sm text-gray-500">
                    {formatFileSize(file.size)}
                  </p>
                  <p class="text-sm text-gray-500">
                    {new Date(file.uploadedAt).toLocaleDateString()}
                  </p>
                  <a
                    href={file.url}
                    target="_blank"
                    rel="noopener noreferrer"
                    class="text-blue-500 hover:underline text-sm mt-2 inline-block"
                  >
                    View File
                  </a>
                </div>
              ))}
            </div>
          )}
        </div>
      </main>
    </>
  );
}

async function getFilesForUser(userId: string) {
  // Implementation depends on your storage solution
  return [];
}

# AWS Configuration
AWS_REGION=us-east-1
AWS_ACCESS_KEY_ID=your_access_key
AWS_SECRET_ACCESS_KEY=your_secret_key
AWS_S3_BUCKET=your-bucket-name

# Fresh
PORT=8000

import { useState } from "preact/hooks";

export default function AdvancedUpload() {
  const [uploadProgress, setUploadProgress] = useState(0);
  const [isUploading, setIsUploading] = useState(false);

  async function handleFileUpload(event: Event) {
    const target = event.target as HTMLInputElement;
    const files = target.files;
    
    if (!files || files.length === 0) return;
    
    setIsUploading(true);
    setUploadProgress(0);
    
    try {
      // Simulate upload progress
      for (let i = 0; i <= 100; i += 10) {
        setUploadProgress(i);
        await new Promise(resolve => setTimeout(resolve, 100));
      }
      
      alert('Upload completed!');
    } catch (error) {
      console.error('Upload failed:', error);
      alert('Upload failed!');
    } finally {
      setIsUploading(false);
      setUploadProgress(0);
    }
  }

  return (
    <div class="upload-container max-w-md mx-auto">
      <input
        type="file"
        multiple
        onChange={handleFileUpload}
        disabled={isUploading}
        class="w-full p-3 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
      />
      
      {isUploading && (
        <div class="mt-4">
          <div class="w-full h-2 bg-gray-200 rounded-full overflow-hidden">
            <div 
              class="h-full bg-green-500 transition-all duration-300 ease-out"
              style={{ width: `${uploadProgress}%` }}
            />
          </div>
          <p class="text-center mt-2 text-sm text-gray-600">
            {uploadProgress}% uploaded
          </p>
        </div>
      )}
    </div>
  );
}

// Example using Deno KV for file metadata storage
export class FileStorage {
  private kv: Deno.Kv;

  constructor() {
    this.kv = await Deno.openKv();
  }

  async saveFileMetadata(userId: string, file: {
    id: string;
    name: string;
    url: string;
    size: number;
    type: string;
  }) {
    const key = ["files", userId, file.id];
    await this.kv.set(key, {
      ...file,
      createdAt: new Date().toISOString(),
    });
  }

  async getFilesForUser(userId: string) {
    const files = [];
    for await (const entry of this.kv.list({ prefix: ["files", userId] })) {
      files.push(entry.value);
    }
    return files;
  }

  async deleteFile(userId: string, fileId: string) {
    const key = ["files", userId, fileId];
    await this.kv.delete(key);
  }
}

export const fileStorage = new FileStorage();

export const uploadRouter = createS3Router({
  // ... routes
}).middleware(async ({ req, file }) => {
  if (Deno.env.get("DENO_ENV") === "development") {
    console.log("Upload request:", req.url);
    console.log("File:", file.name, file.size);
  }
  return {};
});

import { defineConfig } from "$fresh/server.ts";

export default defineConfig({
  plugins: [],
  // Enable static file serving
  staticDir: "./static",
  // Custom build options
  build: {
    target: ["chrome99", "firefox99", "safari15"],
  },
});