Animated File Upload

8.2 KB gzip for the class module

Variants

Recorded states

• disabled recorded state; no setter
• error recorded state; no setter
• reduced motion recorded state; no setter
• completed recorded state; no setter

Usage

Import

import '/components/animated-file-upload/define.js';

// or register it yourself
import { DetentAnimatedFileUpload } from '/components/animated-file-upload/animated-file-upload.js';

Attributes

• disabled
• drop-subtitle
• drop-title
• max-files
• max-size
• multiple
• name
• required
• variant

Properties

• accept
• initialFiles
• uploadHandler
• multiple
• maxSize
• maxFiles
• dropTitle
• dropSubtitle
• variant
• disabled
• name
• required
• onFilesSelected
• onUploadComplete

Slots

No slots are recorded for this component.

Events

• detent-files-selected — { files: File[] }
• detent-upload-complete — { file: UploadFileItem }
• detent-progress — { progress: number }

Example

Runnable example: site/examples/animated-file-upload.ts. The snippet below is generated from the catalogued attributes.

<detent-animated-file-upload
  disabled
  drop-subtitle="or browse from your device"
  drop-title="Drop files here"
  max-files="10"
  max-size
  multiple
  name
  required
  variant="standard"
></detent-animated-file-upload>

Property-only values

const element = document.querySelector('detent-animated-file-upload');
if (element !== null) {
  // accept: string | string[]
  element.accept = [];
  // onFilesSelected: (files: File[]) => void
  element.onFilesSelected = () => {};
  // onUploadComplete: (file: UploadFileItem) => void
  element.onUploadComplete = () => {};
  // uploadHandler: (file, onProgress) => Promise<void>
  element.uploadHandler = () => {};
}

Source

The pinned upstream source for this row:

• src/components/ui/AnimatedFileUpload.tsx sha256 63bcb0d4ca27…

Native files

The native module and its artifacts:

• src/components/animated-file-upload/animated-file-upload.ts
• src/components/animated-file-upload/styles.css
• src/components/animated-file-upload/define.ts
• docs/components/animated-file-upload.md
• site/examples/animated-file-upload.ts
• tests/browser/animated-file-upload.spec.ts
• evidence/components/animated-file-upload.md

API

Boolean attributes follow HTML presence semantics: present means true, absent means false, and disabled="false" still means disabled.

Attributes

Properties

Events

Slots

No slots are recorded for this component.

CSS customisation

• React callback props become typed composed CustomEvents; programmatic state assignment emits none.
• Framer Motion springs/AnimatePresence ported to CSS transitions, WAAPI or the shared rAF spring helper.
• React state/hooks replaced by element-owned state with pre-upgrade property preservation.
• `accept` is enforced in the component with "File type is not accepted (accept: ...)" (the row records it as a documented constraint; upstream only passed it to the picker), while size rejection keeps the upstream message.
• `multiple` follows the accepted default-true rule (attribute reflected, `multiple="false"` resolves true, the property opts out).
• Native form participation added: name, required, reset to `initialFiles`, formStateRestoreCallback, setValidity, external `<label for>`, and a submitted FormData of the queued raw files (or the comma-joined names when only seeded names exist).
• `initialFiles` is assignable after connection: it replaces the queue and becomes the reset default.
• Framer Motion drag reaction and status morph are CSS transitions plus text and progress updates; reduced motion removes them.
• The upstream dark-only hex palette is replaced by theme tokens so both schemes work.
• `maxFiles` truncation stays silent (upstream `combined.slice(0, maxFiles)`); only size and type rejections message and announce.
• The upload is a documented 180ms simulation that makes no request; a consumer `uploadHandler` replaces it entirely.