Files

Overview

The Files feature provides a comprehensive file management system integrated with Supabase storage, enabling secure file uploads, organization, and AI-powered form generation from documents. It supports various file types including images, PDFs, and Office documents, with advanced features like drag-and-drop uploads, file previews, and automated form generation using AI.

Key Features

File Storage and Upload

• Supabase Integration: Secure cloud storage with automatic file management
• Drag-and-Drop Upload: Intuitive dropzone interface with progress tracking
• Multiple Upload Methods: Direct upload or manual URL entry
• File Type Support: Images (JPEG, PNG, GIF, SVG), PDFs, Office documents, and more
• Size Limits: Configurable maximum file size (default: 20MB)
• Batch Operations: Upload up to 30 files simultaneously

File Preview and Management

• Image Preview: In-browser preview for image files
• PDF Viewer: Integrated PDF viewer with zoom and navigation
• File Metadata: Track name, description, size, type, and upload date
• Edit Capabilities: Update file names and descriptions
• Download Options: Direct download or copy public URL

AI Form Generation

• Generate Forms from Files: AI-powered extraction of form structures from PDFs and images
• GeneratedObject Tracking: Store multiple AI-generated form versions per file
• User Prompts: Optional custom instructions for form generation
• Cost Tracking: Monitor AI generation costs per operation
• Form Creation: One-click conversion of AI output to editable forms
• Revision History: Track all generated form versions with status and error logs

Database Models

FormFile Model

Core model for uploaded files:

model FormFile {
  id               String            @id @default(cuid())
  createdAt        DateTime          @default(now())
  updatedAt        DateTime          @updatedAt
  name             String
  description      String
  fileType         String
  fileSize         Int
  fileUrl          String            @db.NVarChar(max)
  filePath         String?
  generatedObjects GeneratedObject[]
}

File and FileFolder Models

Tenant-scoped file organization:

model File {
  id              String      @id @default(cuid())
  createdAt       DateTime    @default(now())
  updatedAt       DateTime    @updatedAt
  tenantId        String
  tenant          Tenant      @relation(fields: [tenantId], references: [id])
  createdByUserId String?
  createdByUser   User?       @relation(fields: [createdByUserId], references: [id])
  fileFolderId    String?
  fileFolder      FileFolder? @relation(fields: [fileFolderId], references: [id])
  name            String
  description     String
  fileType        String
  fileSize        Int
  fileUrl         String      @db.NVarChar(max)
  filePath        String?
  bucketName      String?
  audience        Audience[]
}

model FileFolder {
  id              String       @id @default(cuid())
  createdAt       DateTime     @default(now())
  updatedAt       DateTime     @updatedAt
  tenantId        String
  tenant          Tenant       @relation(fields: [tenantId], references: [id])
  createdByUserId String?
  createdByUser   User?        @relation(fields: [createdByUserId], references: [id])
  name            String
  parentFolderId  String?
  parentFolder    FileFolder?  @relation("subfolders", fields: [parentFolderId], references: [id])
  subfolders      FileFolder[] @relation("subfolders")
  files           File[]
  audience        Audience[]
}

Routes

Admin Routes

• /admin/forms/files - Manage form files and AI generations

File management includes:

• Table view with file previews
• Upload dialog (drag-and-drop or manual URL)
• AI form generation from uploaded files
• Generated object history and management

File Upload Implementation

Using Supabase Upload Hook

const props = useSupabaseUpload({
  bucketName,
  allowedMimeTypes: ["image/*", "application/*"],
  maxFiles: 30,
  maxFileSize: 1000 * 1000 * 20, // 20MB
  upsert: true,
  supabaseKeys,
});

Supported File Types

• Images: JPEG, PNG, GIF, SVG
• Documents: PDF, Word (.doc, .docx), Excel (.xls, .xlsx), PowerPoint (.ppt, .pptx)
• Text: Plain text, HTML, CSS, JavaScript, JSON
• Media: MP4 video, MP3 audio
• Archives: ZIP, TAR, GZIP

AI Form Generation

Generate Form from File

Users can generate forms from uploaded PDFs or images using AI:

1. Upload a file (PDF, image, etc.)
2. Click "Generate Form" button
3. Optionally provide additional instructions
4. AI extracts form structure and creates editable form
5. Review generated form and create or edit

Generated Object Tracking

type GeneratedObjectWithForms = GeneratedObject & {
  user: { email: string; firstName: string | null; lastName: string | null };
  createdForms: { id: string }[];
};

Tracked information:

• Generation status (pending, success, error)
• Cost in cents for AI operation
• User who generated the form
• Associated forms created from the generation
• Error messages if generation failed

Best Practices

1. File Naming: Use descriptive names for easy search and identification
2. Size Optimization: Compress images and PDFs before upload for faster performance
3. Organization: Use folders for logical grouping (tenant-scoped files)
4. AI Generation: Provide clear, well-formatted source documents for best AI results
5. Storage Management: Regularly review and delete unused files
6. Access Control: Use audience settings to restrict file access when needed

Common Operations

Upload Files

1. Navigate to /admin/forms/files
2. Click "+ Upload" button
3. Choose upload method:
   • Upload: Drag and drop files or click to browse
   • Manual: Enter file URL, name, and type
4. Files are automatically saved to database after upload

Generate Form from File

1. Click "Generate" button next to a file
2. Optionally add custom instructions
3. Wait for AI to process the file
4. Review generated form structure
5. Click "Create Form" to convert to editable form
6. Form appears in Forms list with auto-generated slug

Edit File Details

1. Click on a file in the table
2. Click edit icon (pencil) in dropdown menu
3. Update name or description
4. Click "Save" to update

Delete File

1. Click dropdown menu (three dots) next to file
2. Select "Delete"
3. Confirm deletion (cannot be undone)
4. File is removed from Supabase storage and database

Integration Points

• Forms: Generate forms from uploaded files using AI
• Supabase: Cloud storage backend for file persistence
• AI SDK: OpenAI integration for intelligent form extraction
• Audience: Audience-based file access control (tenant-scoped files)