@codaijs/keel 0.1.0

package/sails/file-uploads/files/frontend/components/FileUploadButton.tsx

@@ -0,0 +1,147 @@
+import { useState, useRef, useCallback } from "react";
+import { useFileUpload } from "@/hooks/useFileUpload";
+
+interface FileUploadButtonProps {
+  /** Accepted MIME types (e.g., "image/*,.pdf"). Defaults to all files. */
+  accept?: string;
+  /** Maximum file size in bytes. Defaults to 50 MB. */
+  maxSize?: number;
+  /** Callback invoked when an upload completes successfully. */
+  onUploadComplete?: (file: { id: string; fileName: string }) => void;
+}
+
+const DEFAULT_MAX_SIZE = 50 * 1024 * 1024; // 50 MB
+
+/**
+ * File upload button with drag-and-drop support.
+ *
+ * Displays an upload zone that accepts clicks and drag-and-drop. Shows upload
+ * progress while a file is being transferred.
+ */
+export function FileUploadButton({
+  accept,
+  maxSize = DEFAULT_MAX_SIZE,
+  onUploadComplete,
+}: FileUploadButtonProps) {
+  const { upload, isUploading, progress, error } = useFileUpload();
+  const [isDragOver, setIsDragOver] = useState(false);
+  const [validationError, setValidationError] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFile = useCallback(
+    async (file: File) => {
+      setValidationError(null);
+
+      if (file.size > maxSize) {
+        const mb = Math.round(maxSize / 1024 / 1024);
+        setValidationError(`File size must be less than ${mb} MB.`);
+        return;
+      }
+
+      const result = await upload(file);
+      if (result) {
+        onUploadComplete?.(result);
+      }
+    },
+    [upload, maxSize, onUploadComplete],
+  );
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      handleFile(file);
+    }
+    // Reset the input so the same file can be selected again.
+    e.target.value = "";
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragOver(false);
+    const file = e.dataTransfer.files?.[0];
+    if (file) {
+      handleFile(file);
+    }
+  };
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragOver(true);
+  };
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragOver(false);
+  };
+
+  const displayError = validationError ?? error;
+
+  return (
+    <div className="w-full">
+      <button
+        type="button"
+        onClick={() => fileInputRef.current?.click()}
+        onDrop={handleDrop}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        disabled={isUploading}
+        className={`flex w-full flex-col items-center justify-center rounded-xl border-2 border-dashed px-6 py-10 transition-colors ${
+          isDragOver
+            ? "border-keel-blue bg-keel-blue/10"
+            : "border-keel-gray-700 hover:border-keel-gray-500"
+        } ${isUploading ? "cursor-not-allowed opacity-60" : "cursor-pointer"}`}
+      >
+        {isUploading ? (
+          <>
+            {/* Progress indicator */}
+            <div className="mb-3 h-10 w-10 animate-spin rounded-full border-4 border-keel-gray-600 border-t-keel-blue" />
+            <p className="text-sm font-medium text-keel-gray-300">
+              Uploading... {progress}%
+            </p>
+            <div className="mt-3 h-2 w-48 overflow-hidden rounded-full bg-keel-gray-800">
+              <div
+                className="h-full rounded-full bg-keel-blue transition-all duration-300"
+                style={{ width: `${progress}%` }}
+              />
+            </div>
+          </>
+        ) : (
+          <>
+            {/* Upload icon */}
+            <svg
+              className="mb-3 h-10 w-10 text-keel-gray-500"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={1.5}
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"
+              />
+            </svg>
+            <p className="text-sm font-medium text-keel-gray-300">
+              Click to upload or drag and drop
+            </p>
+            <p className="mt-1 text-xs text-keel-gray-500">
+              Max file size: {Math.round(maxSize / 1024 / 1024)} MB
+            </p>
+          </>
+        )}
+      </button>
+
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept={accept}
+        onChange={handleInputChange}
+        className="hidden"
+      />
+
+      {displayError && (
+        <p className="mt-2 text-sm text-red-400">{displayError}</p>
+      )}
+    </div>
+  );
+}

package/sails/file-uploads/files/frontend/hooks/useFileUpload.ts

@@ -0,0 +1,106 @@
+import { useState, useCallback } from "react";
+
+interface UploadUrlResponse {
+  uploadUrl: string;
+  file: {
+    id: string;
+    key: string;
+    fileName: string;
+  };
+}
+
+interface UseFileUploadResult {
+  /** Upload a file. Returns the file record on success. */
+  upload: (file: File) => Promise<{ id: string; fileName: string } | null>;
+  /** Whether an upload is currently in progress. */
+  isUploading: boolean;
+  /** Upload progress as a percentage (0-100). */
+  progress: number;
+  /** Last error message, if any. */
+  error: string | null;
+}
+
+/**
+ * Hook for uploading files via presigned URLs.
+ *
+ * 1. Requests a presigned upload URL from the backend
+ * 2. PUTs the file directly to S3-compatible storage
+ * 3. Returns the file metadata
+ *
+ * Usage:
+ *   const { upload, isUploading, progress, error } = useFileUpload();
+ *   const result = await upload(file);
+ */
+export function useFileUpload(): UseFileUploadResult {
+  const [isUploading, setIsUploading] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [error, setError] = useState<string | null>(null);
+
+  const upload = useCallback(async (file: File) => {
+    setIsUploading(true);
+    setProgress(0);
+    setError(null);
+
+    try {
+      // Step 1: Get presigned upload URL from the backend.
+      const response = await fetch("/api/files/upload-url", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        credentials: "include",
+        body: JSON.stringify({
+          fileName: file.name,
+          contentType: file.type,
+          maxSize: file.size,
+        }),
+      });
+
+      if (!response.ok) {
+        const data = await response.json().catch(() => ({}));
+        throw new Error(data.error ?? `Upload failed (${response.status})`);
+      }
+
+      const { uploadUrl, file: fileRecord } =
+        (await response.json()) as UploadUrlResponse;
+
+      // Step 2: Upload the file directly to storage via presigned URL.
+      // Use XMLHttpRequest for progress tracking.
+      await new Promise<void>((resolve, reject) => {
+        const xhr = new XMLHttpRequest();
+
+        xhr.upload.addEventListener("progress", (e) => {
+          if (e.lengthComputable) {
+            setProgress(Math.round((e.loaded / e.total) * 100));
+          }
+        });
+
+        xhr.addEventListener("load", () => {
+          if (xhr.status >= 200 && xhr.status < 300) {
+            resolve();
+          } else {
+            reject(new Error(`Storage upload failed (${xhr.status})`));
+          }
+        });
+
+        xhr.addEventListener("error", () => {
+          reject(new Error("Network error during upload"));
+        });
+
+        xhr.open("PUT", uploadUrl);
+        xhr.setRequestHeader("Content-Type", file.type);
+        xhr.send(file);
+      });
+
+      setProgress(100);
+      return { id: fileRecord.id, fileName: fileRecord.fileName };
+    } catch (err) {
+      const message =
+        err instanceof Error ? err.message : "Upload failed";
+      setError(message);
+      return null;
+    } finally {
+      setIsUploading(false);
+    }
+  }, []);
+
+  return { upload, isUploading, progress, error };
+}

package/sails/file-uploads/files/frontend/hooks/useFiles.ts

@@ -0,0 +1,118 @@
+import { useState, useEffect, useCallback } from "react";
+
+interface FileRecord {
+  id: string;
+  fileName: string;
+  contentType: string | null;
+  sizeBytes: number | null;
+  createdAt: string;
+}
+
+interface UseFilesResult {
+  /** Array of the current user's files. */
+  files: FileRecord[];
+  /** Whether the file list is loading. */
+  isLoading: boolean;
+  /** Last error message, if any. */
+  error: string | null;
+  /** Delete a file by ID. */
+  deleteFile: (id: string) => Promise<boolean>;
+  /** Get a temporary download URL for a file. */
+  getDownloadUrl: (id: string) => Promise<string | null>;
+  /** Manually refresh the file list. */
+  refresh: () => Promise<void>;
+}
+
+/**
+ * Hook for managing the current user's files.
+ *
+ * Automatically fetches the file list on mount.
+ *
+ * Usage:
+ *   const { files, isLoading, deleteFile, getDownloadUrl, refresh } = useFiles();
+ */
+export function useFiles(): UseFilesResult {
+  const [files, setFiles] = useState<FileRecord[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchFiles = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const response = await fetch("/api/files", {
+        credentials: "include",
+      });
+
+      if (!response.ok) {
+        throw new Error(`Failed to fetch files: ${response.statusText}`);
+      }
+
+      const data = await response.json();
+      setFiles(data.files ?? []);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Failed to load files",
+      );
+      setFiles([]);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchFiles();
+  }, [fetchFiles]);
+
+  const deleteFile = useCallback(async (id: string): Promise<boolean> => {
+    try {
+      const response = await fetch(`/api/files/${id}`, {
+        method: "DELETE",
+        credentials: "include",
+      });
+
+      if (!response.ok) {
+        throw new Error("Failed to delete file");
+      }
+
+      // Remove from local state.
+      setFiles((prev) => prev.filter((f) => f.id !== id));
+      return true;
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Failed to delete file",
+      );
+      return false;
+    }
+  }, []);
+
+  const getDownloadUrl = useCallback(
+    async (id: string): Promise<string | null> => {
+      try {
+        const response = await fetch(`/api/files/${id}`, {
+          credentials: "include",
+        });
+
+        if (!response.ok) {
+          throw new Error("Failed to get download URL");
+        }
+
+        const data = await response.json();
+        return data.file?.downloadUrl ?? null;
+      } catch {
+        return null;
+      }
+    },
+    [],
+  );
+
+  return {
+    files,
+    isLoading,
+    error,
+    deleteFile,
+    getDownloadUrl,
+    refresh: fetchFiles,
+  };
+}

package/sails/file-uploads/files/frontend/pages/Files.tsx

@@ -0,0 +1,37 @@
+import { useCallback } from "react";
+import { FileUploadButton } from "@/components/files/FileUploadButton";
+import { FileList } from "@/components/files/FileList";
+import { useFiles } from "@/hooks/useFiles";
+
+/**
+ * Files page.
+ *
+ * Combines the file upload button and file browser into a single page.
+ */
+export function FilesPage() {
+  const { refresh } = useFiles();
+
+  const handleUploadComplete = useCallback(() => {
+    // Refresh the file list after a successful upload.
+    refresh();
+  }, [refresh]);
+
+  return (
+    <div className="mx-auto max-w-4xl px-4 py-10 sm:px-6 lg:px-8">
+      <div className="mb-8">
+        <h1 className="text-2xl font-bold text-white">Files</h1>
+        <p className="mt-1 text-sm text-keel-gray-400">
+          Upload, manage, and download your files.
+        </p>
+      </div>
+
+      {/* Upload zone */}
+      <div className="mb-8">
+        <FileUploadButton onUploadComplete={handleUploadComplete} />
+      </div>
+
+      {/* File browser */}
+      <FileList />
+    </div>
+  );
+}