ObjectCard shows a file you already stored, such as an attachment on a record, with a download and a delete action. Pass the object key and the hooks for the actions you want. While its file downloads it shows the progress, and while it is deleted, a spinner.

Preview

Download a file to see its progress, or delete it.

quarterly-report.pdf8.0 MB

brand-assets.zip24.0 MB

avatar.png175.8 KB

"use client";import { useState } from "react";import { RotateCcwIcon } from "lucide-react";import { useDelete, useFetchDownload } from "@dimah-s3/react";import { DeleteToasts, DownloadToasts, ObjectCard } from "@dimah-s3/ui";import { Button } from "@/components/ui/button";const FILES = [  {    key: "uploads/3f1a/quarterly-report.pdf",    size: 8 * 1024 * 1024,    type: "application/pdf",  },  {    key: "uploads/9b2e/brand-assets.zip",    size: 24 * 1024 * 1024,    type: "application/zip",  },  {    key: "uploads/c47d/avatar.png",    size: 180_000,    type: "image/png",    previewUrl: "/dimah-avatar.png",  },];export function ObjectCardDemo() {  const download = useFetchDownload({ route: "uploads" });  const remove = useDelete({ route: "uploads" });  const [files, setFiles] = useState(FILES);  return (    <div className="mx-auto flex w-full max-w-md flex-col gap-2">      {files.map((file) => (        <ObjectCard          key={file.key}          objectKey={file.key}          fileSize={file.size}          contentType={file.type}          previewUrl={file.previewUrl}          download={download}          delete={remove}          onDeleted={(result) =>            setFiles((current) =>              current.filter((item) => !result.deleted.includes(item.key)),            )          }        />      ))}      {files.length < FILES.length ? (        <Button          variant="ghost"          size="sm"          className="self-center"          onClick={() => setFiles(FILES)}        >          <RotateCcwIcon data-icon="inline-start" />          Restore the demo files        </Button>      ) : null}      <DownloadToasts download={download} />      <DeleteToasts delete={remove} />    </div>  );}

Install

Complete UI Setup first: the stylesheet and one <Toaster />. Then add this component:

import { ObjectCard } from "@dimah-s3/ui";

Usage

"use client";

import { useDelete, useFetchDownload } from "@dimah-s3/react";
import { DeleteToasts, DownloadToasts, ObjectCard } from "@dimah-s3/ui";

type Attachment = { key: string; size: number; type: string };

export function Attachments({
  files,
  onRemoved,
}: {
  files: Attachment[];
  onRemoved: (key: string) => void;
}) {
  const download = useFetchDownload({ route: "attachments" });
  const remove = useDelete({ route: "attachments" });

  return (
    <>
      {files.map((file) => (
        <ObjectCard
          key={file.key}
          objectKey={file.key}
          fileSize={file.size}
          contentType={file.type}
          download={download}
          delete={remove}
          onDeleted={(result) => {
            if (result.deleted.includes(file.key)) onRemoved(file.key);
          }}
        />
      ))}
      <DownloadToasts download={download} />
      <DeleteToasts delete={remove} />
    </>
  );
}

The name defaults to the last segment of the key. Pass fileName to show, and save, another one.
download takes useDownload or useFetchDownload. With a fetch download the card shows its progress ring and the bytes received.
delete adds the delete action and its confirm dialog. The card stays until you remove it, so drop it in onDeleted.
Pass previewUrl for an image thumbnail, and description to replace the size line.
Each card is its own Download and Delete root, and does not toast: mount DownloadToasts and DeleteToasts once for the hooks.

Examples

Your own actions

actions render before the download and delete actions. Here a Copy link action signs a URL with the same download hook.

price-list.pdfUpdated Oct 30 · 500 KB

"use client";import { useState } from "react";import { CheckIcon, LinkIcon } from "lucide-react";import { useDownload } from "@dimah-s3/react";import { AttachmentAction, DownloadToasts, ObjectCard } from "@dimah-s3/ui";const KEY = "uploads/2c9a/price-list.pdf";export function ObjectCardActionsDemo() {  const download = useDownload({ route: "uploads" });  const [copied, setCopied] = useState(false);  async function copyLink() {    // Signs a URL without saving the file.    const outcome = await download.presign(KEY);    if (outcome.status !== "success") return;    await navigator.clipboard.writeText(outcome.data.url);    setCopied(true);    setTimeout(() => setCopied(false), 1500);  }  return (    <div className="mx-auto w-full max-w-md">      <ObjectCard        objectKey={KEY}        fileSize={512_000}        contentType="application/pdf"        description="Updated Oct 30 · 500 KB"        download={download}        actions={          <AttachmentAction            aria-label="Copy link to price-list.pdf"            onClick={() => void copyLink()}          >            {copied ? <CheckIcon /> : <LinkIcon />}          </AttachmentAction>        }      />      <DownloadToasts download={download} />    </div>  );}

Props

import type { ObjectCardProps } from "@dimah-s3/ui";

Prop

Type

Object Card

Preview

Install

Usage

Examples

Your own actions

Props

On this page

Object Card

PreviewCopy Anchor Link

InstallCopy Anchor Link

UsageCopy Anchor Link

ExamplesCopy Anchor Link

Your own actionsCopy Anchor Link

PropsCopy Anchor Link

On this page

Preview

Install

Usage

Examples

Your own actions

Props