File Upload

File upload manager with drag & drop, progress simulation, and effect cleanup.

#Preview

📁

Drag & drop files here

or click the button below

No files added yet. Drop files or click "Add Sample Files" to get started.

1"use client"23import { createSignal, createMemo, createEffect, onCleanup } from '@barefootjs/client'4import { Card, CardContent } from '@/components/ui/card'5import { Badge } from '@/components/ui/badge'6import { Button } from '@/components/ui/button'7import { Progress } from '@/components/ui/progress'89export function FileUpload() {10  const [files, setFiles] = createSignal([])1112  // Upload simulation with effect cleanup13  createEffect(() => {14    const uploading = files().filter(f => f.status === 'uploading')15    if (uploading.length === 0) return1617    const timer = setInterval(() => {18      setFiles(prev => prev.map(f =>19        f.status === 'uploading'20          ? { ...f, progress: Math.min(100, f.progress + 10) }21          : f22      ))23    }, 200)2425    onCleanup(() => clearInterval(timer))26  })2728  return (29    <div>30      <Button onClick={addFiles}>Add Files</Button>31      {files().map(file => (32        <Card key={file.id}>33          <CardContent>34            <span>{file.name}</span>35            <Badge>{file.status}</Badge>36            {file.status === 'uploading'37              ? <Progress value={file.progress} />38              : null}39          </CardContent>40        </Card>41      ))}42    </div>43  )44}

#Features

Drag & drop zone with isDragging signal-driven class toggle
Per-file upload progress simulation with interval timer
onCleanup for interval cleanup on effect re-run
Per-item status badges (pending/uploading/done/error)
Computed stats from array signal (total size, completed count)
Conditional rendering per status (progress bar, error message, action buttons)
Toast notification on upload completion

#Upload Simulation

Upload progress is simulated with setInterval inside a createEffect. Each tick increments the progress of all uploading files. Files randomly fail (20% chance) to test error states.

#Effect Cleanup

onCleanup(() => clearInterval(timer)) ensures the interval is cleared when the effect re-runs (new files start uploading) or when all uploads complete.