@joewinke/jatui 0.1.22 → 0.1.24

package/src/lib/components/FileDropzone.svelte

@@ -1,493 +0,0 @@
-<script module lang="ts">
-  export interface FileDropzoneFile {
-    /** The raw File object for pending (pre-upload) files */
-    file?: File
-    /** Name to display */
-    name: string
-    /** MIME type */
-    mimeType: string
-    /** File size in bytes */
-    size?: number
-    /** URL for already-uploaded files (for FileThumbnail) */
-    url?: string
-    /** Arbitrary metadata for the consumer */
-    meta?: Record<string, unknown>
-  }
-</script>
-
-<script lang="ts">
-  import FileThumbnail from "./FileThumbnail.svelte"
-
-  // Lightweight extension→MIME map (avoids mime-types dependency)
-  const EXT_TO_MIME: Record<string, string> = {
-    png: "image/png",
-    jpg: "image/jpeg",
-    jpeg: "image/jpeg",
-    gif: "image/gif",
-    webp: "image/webp",
-    svg: "image/svg+xml",
-    avif: "image/avif",
-    bmp: "image/bmp",
-    ico: "image/x-icon",
-    tiff: "image/tiff",
-    tif: "image/tiff",
-    pdf: "application/pdf",
-    zip: "application/zip",
-    docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
-    xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
-    pptx: "application/vnd.openxmlformats-officedocument.presentationml.presentation",
-    doc: "application/msword",
-    xls: "application/vnd.ms-excel",
-    ppt: "application/vnd.ms-powerpoint",
-    txt: "text/plain",
-    csv: "text/csv",
-    mp4: "video/mp4",
-    mp3: "audio/mpeg",
-    wav: "audio/wav",
-    dwg: "image/vnd.dwg",
-  }
-
-  const ZIP_TYPES = new Set([
-    "application/zip",
-    "application/x-zip-compressed",
-    "application/x-zip",
-  ])
-
-  function extToMime(filename: string): string | false {
-    const ext = filename.split(".").pop()?.toLowerCase() ?? ""
-    return EXT_TO_MIME[ext] ?? false
-  }
-
-  function mimeToExt(mime: string): string | false {
-    for (const [ext, m] of Object.entries(EXT_TO_MIME)) {
-      if (m === mime) return ext
-    }
-    return false
-  }
-
-  interface Props {
-    /** MIME types to accept, e.g. ["image/png","application/pdf"] */
-    accept?: string[]
-    /** Max file size in bytes (default 50 MB) */
-    maxSize?: number
-    /** Max number of files (default 10) */
-    maxFiles?: number
-    disabled?: boolean
-    /** Allow selecting multiple files */
-    multiple?: boolean
-    /** Already-uploaded files to show in the grid below the dropzone */
-    uploadedFiles?: FileDropzoneFile[]
-    /** Whether an upload is in flight */
-    isUploading?: boolean
-    /** Whether a ZIP extraction is in flight */
-    isExtracting?: boolean
-    /** Label shown in the dropzone (default: "Drop files or folders here") */
-    dropLabel?: string
-    /** Subtext shown below the label */
-    dropSubtext?: string
-    /** Called when the user selects or drops files (after validation) */
-    onFilesSelected?: (files: File[], errors: string[]) => void
-  }
-
-  let {
-    accept = [
-      "image/png",
-      "image/jpeg",
-      "application/pdf",
-      "application/zip",
-      "application/x-zip-compressed",
-    ],
-    maxSize = 50 * 1024 * 1024,
-    maxFiles = 10,
-    disabled = false,
-    multiple = true,
-    uploadedFiles = [],
-    isUploading = false,
-    isExtracting = false,
-    dropLabel = "Upload files",
-    dropSubtext,
-    onFilesSelected,
-  }: Props = $props()
-
-  let isDragOver = $state(false)
-  let fileInput = $state<HTMLInputElement>(undefined!)
-  let dropzoneRef = $state<HTMLElement>(undefined!)
-  let selectedFiles = $state<File[]>([])
-
-  // Human-readable accepted extensions for display
-  const acceptedExtensions = $derived(
-    accept
-      .map((type) => {
-        if (ZIP_TYPES.has(type)) return ".zip"
-        const ext = mimeToExt(type)
-        return ext ? `.${ext}` : type
-      })
-      .filter((v, i, a) => a.indexOf(v) === i) // dedupe
-      .join(", ")
-  )
-
-  function validateFile(file: File): string | null {
-    if (file.type && !accept.includes(file.type)) {
-      // Try to infer from extension for files where browser didn't set MIME
-      const inferred = extToMime(file.name)
-      if (!inferred || !accept.includes(inferred)) {
-        return `File type not supported. Accepted: ${acceptedExtensions}`
-      }
-    }
-    if (file.size > maxSize) {
-      const sizeMB = Math.round(maxSize / (1024 * 1024))
-      return `File too large (max ${sizeMB} MB)`
-    }
-    return null
-  }
-
-  function processFiles(files: FileList | File[]): { validFiles: File[]; errors: string[] } {
-    const fileArray = Array.from(files)
-    const validFiles: File[] = []
-    const errors: string[] = []
-
-    if (fileArray.length > maxFiles) {
-      errors.push(`Too many files. Maximum ${maxFiles} files allowed.`)
-      return { validFiles: [], errors }
-    }
-
-    for (const file of fileArray) {
-      const error = validateFile(file)
-      if (error) {
-        errors.push(`${file.name}: ${error}`)
-      } else {
-        validFiles.push(file)
-      }
-    }
-    return { validFiles, errors }
-  }
-
-  // Recursively read all files from a directory entry
-  async function readDirectoryEntries(entry: FileSystemDirectoryEntry): Promise<File[]> {
-    const files: File[] = []
-    const reader = entry.createReader()
-
-    const readBatch = (): Promise<FileSystemEntry[]> =>
-      new Promise((resolve, reject) => reader.readEntries(resolve, reject))
-
-    let batch: FileSystemEntry[]
-    do {
-      batch = await readBatch()
-      for (const child of batch) {
-        if (child.isFile) {
-          const file = await new Promise<File>((resolve, reject) =>
-            (child as FileSystemFileEntry).file(resolve, reject),
-          )
-          files.push(file)
-        } else if (child.isDirectory) {
-          const subFiles = await readDirectoryEntries(child as FileSystemDirectoryEntry)
-          files.push(...subFiles)
-        }
-      }
-    } while (batch.length > 0)
-
-    return files
-  }
-
-  // Collect files from DataTransfer items (handles folders)
-  async function collectDroppedFiles(dataTransfer: DataTransfer): Promise<File[]> {
-    const items = dataTransfer.items
-    if (!items || items.length === 0) {
-      return Array.from(dataTransfer.files)
-    }
-
-    const allFiles: File[] = []
-    const entries: FileSystemEntry[] = []
-
-    // Grab entries synchronously — they become invalid after await
-    for (let i = 0; i < items.length; i++) {
-      const entry = items[i].webkitGetAsEntry?.()
-      if (entry) entries.push(entry)
-    }
-
-    for (const entry of entries) {
-      if (entry.isFile) {
-        const file = await new Promise<File>((resolve, reject) =>
-          (entry as FileSystemFileEntry).file(resolve, reject),
-        )
-        allFiles.push(file)
-      } else if (entry.isDirectory) {
-        const dirFiles = await readDirectoryEntries(entry as FileSystemDirectoryEntry)
-        allFiles.push(...dirFiles)
-      }
-    }
-
-    return allFiles
-  }
-
-  function handleFileSelect(event: Event) {
-    const target = event.target as HTMLInputElement
-    if (target.files && target.files.length > 0) {
-      const { validFiles, errors } = processFiles(target.files)
-      selectedFiles = validFiles
-      onFilesSelected?.(validFiles, errors)
-    }
-  }
-
-  function handleDragEnter(event: DragEvent) {
-    event.preventDefault()
-    isDragOver = true
-  }
-
-  function handleDragLeave(event: DragEvent) {
-    event.preventDefault()
-    if (!dropzoneRef.contains(event.relatedTarget as Node)) {
-      isDragOver = false
-    }
-  }
-
-  function handleDragOver(event: DragEvent) {
-    event.preventDefault()
-  }
-
-  async function handleDrop(event: DragEvent) {
-    event.preventDefault()
-    isDragOver = false
-
-    if (disabled || !event.dataTransfer) return
-
-    const allFiles = await collectDroppedFiles(event.dataTransfer)
-    // Filter hidden / macOS artifact files
-    const filtered = allFiles.filter(
-      (f) => !f.name.startsWith(".") && !f.name.startsWith("__MACOSX"),
-    )
-
-    if (filtered.length > 0) {
-      const { validFiles, errors } = processFiles(filtered)
-      selectedFiles = validFiles
-      onFilesSelected?.(validFiles, errors)
-    }
-  }
-
-  function openFileDialog() {
-    if (!disabled) fileInput.click()
-  }
-
-  function formatFileSize(bytes: number): string {
-    if (bytes === 0) return "0 B"
-    const k = 1024
-    const sizes = ["B", "KB", "MB", "GB"]
-    const i = Math.floor(Math.log(bytes) / Math.log(k))
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i]
-  }
-
-  function fileIcon(file: File) {
-    if (file.type.startsWith("image/")) return "image"
-    if (file.type === "application/pdf") return "pdf"
-    if (ZIP_TYPES.has(file.type)) return "zip"
-    return "generic"
-  }
-
-  // Clear selected files when upload completes
-  $effect(() => {
-    if (!isUploading && uploadedFiles.length > 0) {
-      selectedFiles = []
-    }
-  })
-</script>
-
-<div class="w-full">
-  <!-- Hidden file input -->
-  <input
-    bind:this={fileInput}
-    type="file"
-    accept={accept.join(",")}
-    {multiple}
-    {disabled}
-    onchange={handleFileSelect}
-    class="hidden"
-    aria-hidden="true"
-  />
-
-  <!-- Dropzone -->
-  <div
-    bind:this={dropzoneRef}
-    class="relative border-2 border-dashed rounded-lg p-6 transition-all duration-200 cursor-pointer
-           {isDragOver
-      ? 'border-primary bg-primary/5 scale-[1.02]'
-      : disabled
-        ? 'border-base-300 bg-base-200 cursor-not-allowed'
-        : 'border-base-300 hover:border-primary hover:bg-primary/5'}"
-    onclick={openFileDialog}
-    ondragenter={handleDragEnter}
-    ondragleave={handleDragLeave}
-    ondragover={handleDragOver}
-    ondrop={handleDrop}
-    role="button"
-    tabindex="0"
-    aria-label={dropLabel}
-    onkeydown={(e) => {
-      if (e.key === "Enter" || e.key === " ") {
-        e.preventDefault()
-        openFileDialog()
-      }
-    }}
-  >
-    <div class="text-center">
-      <!-- Upload icon -->
-      <svg
-        class="mx-auto h-12 w-12 {disabled ? 'text-base-content/40' : 'text-base-content/50'}"
-        stroke="currentColor"
-        fill="none"
-        viewBox="0 0 48 48"
-        aria-hidden="true"
-      >
-        <path
-          d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-      </svg>
-
-      <div class="mt-4">
-        <p class="text-lg font-medium {disabled ? 'text-base-content/40' : 'text-base-content'}">
-          {isDragOver ? "Drop files or folders here" : dropLabel}
-        </p>
-        <p class="mt-2 text-sm {disabled ? 'text-base-content/40' : 'text-base-content/50'}">
-          {#if !disabled}
-            {#if dropSubtext}
-              {dropSubtext}
-            {:else}
-              Drag and drop files, folders, or ZIP archives, or
-              <span class="font-medium text-primary underline">click to browse</span>
-            {/if}
-          {:else}
-            File upload is disabled
-          {/if}
-        </p>
-      </div>
-
-      {#if !disabled}
-        <div class="mt-4 text-xs text-base-content/50 space-y-1">
-          <p>Accepted: {acceptedExtensions}</p>
-          <p>Max size: {formatFileSize(maxSize)} &middot; Max files: {maxFiles}</p>
-          <p>You can drop a folder or ZIP archive</p>
-        </div>
-      {/if}
-    </div>
-
-    <!-- Drag overlay -->
-    {#if isDragOver}
-      <div
-        class="absolute inset-0 bg-primary/10 rounded-lg border-2 border-primary border-dashed flex items-center justify-center"
-      >
-        <div class="text-center">
-          <svg
-            class="mx-auto h-16 w-16 text-primary"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-            aria-hidden="true"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
-            />
-          </svg>
-          <p class="mt-2 text-lg font-medium text-primary">Drop files or folders here</p>
-        </div>
-      </div>
-    {/if}
-  </div>
-
-  <!-- Selected Files (before upload) -->
-  {#if selectedFiles.length > 0 && !isUploading && uploadedFiles.length === 0}
-    <div class="mt-4 space-y-2">
-      <h4 class="text-sm font-medium text-base-content/70">
-        Selected ({selectedFiles.length})
-      </h4>
-      <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-3">
-        {#each selectedFiles as file}
-          <div class="flex flex-col items-center p-3 bg-base-200 rounded-lg border border-base-300">
-            <div class="w-12 h-12 bg-base-100 rounded border border-base-300 flex items-center justify-center mb-2">
-              {#if fileIcon(file) === "image"}
-                <svg class="h-6 w-6 text-info" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                </svg>
-              {:else if fileIcon(file) === "pdf"}
-                <svg class="h-6 w-6 text-error" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                  <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20M10.92,12.31C10.68,11.54 10.15,9.08 11.55,9.04C12.95,9 12.03,12.16 12.03,12.16C12.42,13.65 14.05,14.72 14.05,14.72C14.55,14.57 17.4,14.24 17,15.72C16.57,17.2 13.5,15.81 13.5,15.81C11.55,15.95 10.09,16.47 10.09,16.47C8.96,18.58 7.64,19.5 7.1,18.61C6.43,17.5 9.23,16.07 9.23,16.07C10.68,13.67 10.92,12.31 10.92,12.31Z" />
-                </svg>
-              {:else if fileIcon(file) === "zip"}
-                <svg class="h-6 w-6 text-warning" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
-                </svg>
-              {:else}
-                <svg class="h-6 w-6 text-base-content/40" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                </svg>
-              {/if}
-            </div>
-            <span class="text-xs text-base-content/60 text-center font-medium truncate w-full" title={file.name}>
-              {file.name}
-            </span>
-            <span class="text-xs text-base-content/50 mt-1">{formatFileSize(file.size)}</span>
-          </div>
-        {/each}
-      </div>
-    </div>
-  {/if}
-
-  <!-- Upload / extraction progress -->
-  {#if isExtracting}
-    <div class="mt-4">
-      <div class="flex items-center justify-center p-6 bg-warning/10 rounded-lg border border-warning/30">
-        <div class="text-center">
-          <span class="loading loading-spinner loading-lg text-warning"></span>
-          <p class="mt-3 text-sm font-medium text-warning-content">Extracting ZIP file…</p>
-          <p class="text-xs text-warning-content/70">Unpacking and uploading files from archive</p>
-        </div>
-      </div>
-    </div>
-  {:else if isUploading}
-    <div class="mt-4">
-      <div class="flex items-center justify-center p-6 bg-info/10 rounded-lg border border-info/30">
-        <div class="text-center">
-          <span class="loading loading-spinner loading-lg text-primary"></span>
-          <p class="mt-3 text-sm font-medium text-info-content">Uploading files…</p>
-          <p class="text-xs text-info-content/70">Please wait while files are uploaded</p>
-        </div>
-      </div>
-    </div>
-  {/if}
-
-  <!-- Uploaded Files (after successful upload) -->
-  {#if uploadedFiles.length > 0}
-    <div class="mt-4 space-y-2">
-      <h4 class="text-sm font-medium text-base-content/70">
-        Uploaded ({uploadedFiles.length})
-      </h4>
-      <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-3">
-        {#each uploadedFiles as file}
-          <div class="flex flex-col items-center p-3 bg-success/10 rounded-lg border border-success/30">
-            <FileThumbnail
-              name={file.name}
-              mimeType={file.mimeType}
-              url={file.url}
-              size="md"
-            />
-            <span class="text-xs text-base-content/60 text-center font-medium truncate w-full mt-2" title={file.name}>
-              {file.name}
-            </span>
-            <span class="text-xs text-success font-medium mt-1">✓ Uploaded</span>
-          </div>
-        {/each}
-      </div>
-    </div>
-  {/if}
-</div>
-
-<style>
-  div[role="button"]:focus {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
-  }
-</style>