@talltydev/file-upload

Production-ready S3 file upload utilities and components for Tallty Kit.

Features

Core Upload

• Multipart Upload: Automatic multipart for large files (>50MB)
• Progress Tracking: Real-time upload progress with Uppy
• Resumable: Support for resuming interrupted uploads
• Type-Safe: Full TypeScript support with Zod validation

File Preview Components

Enhanced file preview with built-in content viewers for common file types.

Basic Preview (Always Available)

• Images with aspect ratio preservation
• Videos with play/pause controls
• Audio players
• Document icons with metadata

Content Preview (Optional Dependencies)

PDF Preview

pnpm add react-pdf pdfjs-dist

• Full PDF viewer with pagination
• Zoom controls (50% - 300%)
• Text layer and annotation support
• 20MB file size limit (configurable)

Code Preview

pnpm add highlight.js highlightjs-line-numbers.js

• Syntax highlighting for 30+ languages
• Line numbers
• Copy to clipboard
• Auto-detect language from extension
• 1MB file size limit (configurable)

Markdown Preview

pnpm add react-markdown remark-gfm rehype-highlight rehype-sanitize

• GitHub Flavored Markdown (GFM)
• Code syntax highlighting
• XSS protection
• External links open in new tab
• 5MB file size limit (configurable)

Usage

Basic Preview (No Dependencies)

import { FilePreview } from '@talltydev/file-upload'

<FilePreview
  fileRef={fileRef}
  size="medium"
  showMetadata={true}
  showDownload={true}
  showView={true}
/>

Content Preview (Requires Dependencies)

// Add CSS import in your app/globals.css
@import 'highlight.js/styles/github-dark.css';

// Enable content preview
<FilePreview
  fileRef={fileRef}
  showContent={true}  // Enable inline preview for supported types
  previewMode="auto"  // 'auto' | 'metadata' | 'content'
/>

Props

interface FilePreviewProps {
  fileRef: FileRef
  size?: 'small' | 'medium' | 'large'
  showMetadata?: boolean
  showDownload?: boolean
  showView?: boolean
  showRemove?: boolean
  onRemove?: (fileRef: FileRef) => void
  onDownload?: (fileRef: FileRef) => void
  onView?: (fileRef: FileRef) => void
  className?: string
  loading?: boolean

  // Content preview options (requires optional dependencies)
  showContent?: boolean  // Enable inline content preview
  previewMode?: 'auto' | 'metadata' | 'content'
}

Supported File Types

Image: jpg, png, gif, webp, svg Video: mp4, webm, ogg Audio: mp3, wav, ogg Document: pdf, doc, docx, xls, xlsx, ppt, pptx

Content Preview:

• PDF: .pdf
• Markdown: .md
• Code: .js, .ts, .py, .java, .go, .rs, and 20+ more

Configuration

PDF Preview Size Limit

<PDFPreview
  fileRef={fileRef}
  maxSizeBytes={30 * 1024 * 1024}  // 30MB
/>

Code Preview Configuration

<CodePreview
  fileRef={fileRef}
  language="typescript"  // Override auto-detection
  maxSizeBytes={2 * 1024 * 1024}  // 2MB
  showLineNumbers={true}
/>

Markdown Preview Configuration

<MarkdownPreview
  fileRef={fileRef}
  maxSizeBytes={10 * 1024 * 1024}  // 10MB
/>

Installation

pnpm add @talltydev/file-upload

Optional Preview Dependencies

Only install what you need:

# For PDF preview
pnpm add react-pdf pdfjs-dist

# For code highlighting
pnpm add highlight.js highlightjs-line-numbers.js

# For Markdown rendering
pnpm add react-markdown remark-gfm rehype-highlight rehype-sanitize

License

MIT