OpenSpec Change: enterprise-react-file-upload

Change ID: enterprise-react-file-upload
Package: @suaveplan/react-file-upload
Category: react
Target path: react/media/react-file-upload
Status: PROPOSED
Date: 2026-04-24
Reference spec: /mnt/s/web/suaveplan/enterprise/react-file-upload.md

Summary

Deliver @suaveplan/react-file-upload on genesis from scratch at enterprise quality. Drag-and-drop / chunked-upload kit: composite FileUpload (Dropzone + FileList + ProgressBar), individual components, useFileUpload (chunking, concurrency, progress, cancellation, retry, auto-upload) and useDropzone (HTML5 drag-drop + click-to-browse). Pure helpers: createFileState, splitFileIntoChunks, validateFile, matchesMimePattern, createPreviewUrl, revokePreviewUrl, formatBytes, calculateProgress, isImageFile.

Current-state audit (genesis)

Package does not exist on genesis — fresh build.

Available workspace deps on genesis

Package	Role
`@suaveplan/error` (`workspace:^`)	`FileUploadError`
`@suaveplan/mime` (`workspace:^`)	MIME type validation
`@suaveplan/react-translate` (`workspace:^`)	i18n
`zod` (`catalog:forms`)	Upload config schemas
`@opentelemetry/api` (`catalog:observability`)	`file_upload.complete` span

External: tslib catalog:build. React 18 peer.

Preserved public API surface

FileUpload, Dropzone, FileList, ProgressBar, useFileUpload, useDropzone, upload-engine helpers + all types.

New additions for genesis

FileUploadError — codes: FILE_UPLOAD_VALIDATION_FAILED, FILE_UPLOAD_CHUNK_FAILED, FILE_UPLOAD_NETWORK_ERROR.
@suaveplan/mime integration — MIME validation via matchesMimePattern delegates to @suaveplan/mime.
Stories — every component with default, uploading, complete, error, playground.
Playwright E2E — file drag-drop, progress bar, cancel upload.

File layout

react/media/react-file-upload/
  package.json
  tsconfig.json
  vitest.config.ts
  src/
    index.ts
    upload-engine/ (ts + md + test + index)
    dropzone/ (tsx + types + md + test + stories + index)
    file-list/ (tsx + types + md + test + stories + index)
    progress-bar/ (tsx + types + md + test + stories + index)
    file-upload/ (tsx + types + md + test + stories + index)
    hooks/
      use-file-upload/ use-dropzone/
    types/
  e2e/
    file-upload.spec.ts

2.5 KiB Raw Permalink Blame History