Manage local document previews

Create stable object-URL previews and revoke them at every ownership boundary.

MediumBrowser File APIs

50 min0% acceptance

Description

Build DocumentPreviewList for local file descriptors containing stable IDs, names, and Blob values. Create one object URL per descriptor identity, reuse URLs across unchanged rerenders, revoke removed and replaced previews promptly, and revoke every remaining URL on unmount while keeping the list accessible.

Requirements

Export a DocumentPreviewList component from src/App.tsx.
Call urlApi.createObjectURL exactly once for each newly owned Blob.
Reuse an unchanged descriptor's existing URL across rerenders and reordered arrays.
Revoke the URL for each document descriptor removed from the input.
Replace and revoke a URL when a stable document ID receives a different Blob.
Revoke every URL still owned by the component during unmount.
Render a named list with one preview image whose nonempty alt text identifies each file.
Never mutate, sort, or annotate caller-owned File objects or the files array.

Stable rerender

Input

Render the same two File objects twice

Expected output

Each file keeps its original preview URL and no URL is revoked

Explanation

File identity, not array identity, determines reuse.

Replacement

Input

Replace report.pdf with a new File object with the same name

Expected output

The old URL is revoked and a new URL is created

Explanation

Equal metadata does not imply equal browser resources.

Constraints

Treat document IDs as stable row identities
Invoke only the injected URL functions
Render previews in caller-provided order

Hints

Hint 1

Keep a Map from document ID to its Blob and created URL.

Hint 2

Reconcile the previous map against current IDs and Blob identities after each input change.

Hint 3

Use a separate unmount cleanup that revokes whatever the map owns at that moment.

ReactFile APIobject URLs