Supabase Storage delete file from Next.js, with a hold-to-delete file card

supabase/storage-delete-policies.sql (run once in the SQL editor)

-- remove() needs DELETE and SELECT on storage.objects (supabase-js 2.118.0 notes).
-- These two let a signed-in user delete only the files they uploaded to "documents".

create policy "Users can read their own documents"
on storage.objects for select
to authenticated
using (
  bucket_id = 'documents'
  and owner_id = (select auth.uid()::text)
);

create policy "Users can delete their own documents"
on storage.objects for delete
to authenticated
using (
  bucket_id = 'documents'
  and owner_id = (select auth.uid()::text)
);

lib/supabase/server.ts (Supabase's SSR client)

import { createServerClient } from "@supabase/ssr";
import { cookies } from "next/headers";

// Supabase's own server client for Next.js (from its SSR guide)
export async function createClient() {
  const cookieStore = await cookies();

  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY!,
    {
      cookies: {
        getAll() {
          return cookieStore.getAll();
        },
        setAll(cookiesToSet) {
          try {
            cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options));
          } catch {
            // called from a Server Component; the proxy refreshes the session
          }
        },
      },
    },
  );
}

app/files/free-delete-button.tsx (the free route: a plain confirm)

"use client";
import { useTransition } from "react";
import { deleteFile } from "./actions";

// The free route: the same server action behind a plain confirm.
// Swap window.confirm for shadcn's AlertDialog if you use shadcn.
export function FreeDeleteButton({ path, name }: { path: string; name: string }) {
  const [pending, startTransition] = useTransition();
  return (
    <button
      type="button"
      disabled={pending}
      onClick={() => {
        if (!window.confirm(`Delete ${name}? This can't be undone.`)) return;
        startTransition(async () => {
          const { error } = await deleteFile(path);
          if (error) alert(error);
        });
      }}
    >
      {pending ? "Deleting…" : "Delete"}
    </button>
  );
}

lib/storage/empty-folder.ts (delete a folder)

// Server only: call it from a server action or route handler.
import type { SupabaseClient } from "@supabase/supabase-js";

// Supabase Storage has no "delete folder" call: a folder is just a shared
// path prefix. List what's under it and remove() the files, at most 1000 at a time.
export async function emptyFolder(supabase: SupabaseClient, bucket: string, folder: string) {
  const storage = supabase.storage.from(bucket);
  let removed = 0;

  for (;;) {
    const { data: items, error } = await storage.list(folder, { limit: 1000 });
    if (error) throw error;
    if (items.length === 0) return removed;

    // folders come back with id null: empty them first
    for (const sub of items.filter((item) => item.id === null)) {
      removed += await emptyFolder(supabase, bucket, `${folder}/${sub.name}`);
    }

    const paths = items.filter((item) => item.id !== null).map((item) => `${folder}/${item.name}`);
    if (paths.length === 0) return removed;

    const { data, error: removeError } = await storage.remove(paths);
    if (removeError) throw removeError;
    // fewer deleted than asked: a policy is blocking some files, stop instead of looping
    if (data.length < paths.length) {
      throw new Error(`Deleted ${data.length} of ${paths.length} files in ${folder}. Check your delete and select policies.`);
    }
    removed += data.length;
  }
}

components/hold-stage.tsx (scales the piece to its box)

"use client";
import { useEffect, useState } from "react";

// Hold to Delete draws on a fixed 1000 x 660 stage. This scales it to the
// width of its box and hands back a helper that moves keyboard focus inside.
export function useHoldStage() {
  const [el, setEl] = useState<HTMLDivElement | null>(null);
  const [scale, setScale] = useState(0);
  useEffect(() => {
    if (!el) return;
    const ro = new ResizeObserver(([entry]) => setScale(entry.contentRect.width / 1000));
    ro.observe(el);
    return () => ro.disconnect();
  }, [el]);
  const focusIn = (selector: string, delay = 0) =>
    window.setTimeout(() => el?.querySelector<HTMLElement>(selector)?.focus(), delay);
  return { ref: setEl, scale, focusIn };
}

app/files/[name]/file-card.tsx (Hold to Delete as the file)

"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
import HoldToDelete from "@/components/HoldToDelete";
import { useHoldStage } from "@/components/hold-stage";
import { deleteFile } from "../actions";

type Props = { path: string; name: string; meta: string };

export function FileCard({ path, name, meta }: Props) {
  const router = useRouter();
  const { ref, scale, focusIn } = useHoldStage();
  const [attempt, setAttempt] = useState(0); // a new key puts the file back
  const [message, setMessage] = useState("");
  const ext = name.includes(".") ? name.split(".").pop()!.slice(0, 4).toUpperCase() : "FILE";

  // runs only when the undo window is over: the one call that can't be taken back
  const commit = async () => {
    const { error } = await deleteFile(path);
    if (error) {
      setMessage(`${name} was not deleted: ${error}`);
      setAttempt((n) => n + 1);
      return;
    }
    router.replace("/files");
  };

  return (
    <section className="space-y-3">
      <div ref={ref} className="relative aspect-[1000/660] w-full overflow-hidden rounded-xl">
        {scale > 0 && (
          <HoldToDelete
            key={attempt}
            fileName={name}
            fileMeta={meta}
            fileType={ext}
            tags={[]}
            emptyText="File deleted"
            restoreLabel={null}
            onDelete={() => focusIn(".qhd-toast button", 1100)}
            onUndo={() => focusIn(".qhd-hold")}
            onCommit={commit}
            style={{ position: "absolute", left: 0, top: 0, transform: `scale(${scale})`, transformOrigin: "0 0" }}
          />
        )}
      </div>
      <p role="alert" className="text-sm text-red-600">{message}</p>
    </section>
  );
}

app/files/[name]/page.tsx

import { notFound, redirect } from "next/navigation";
import { createClient } from "@/lib/supabase/server";
import { FileCard } from "./file-card";
import { FreeDeleteButton } from "../free-delete-button";

// /files/<name>: one file in the user's own folder of the "documents" bucket
export default async function FilePage({ params }: { params: Promise<{ name: string }> }) {
  const { name: raw } = await params;
  const name = decodeURIComponent(raw);
  const supabase = await createClient();
  const { data: auth } = await supabase.auth.getClaims();
  const userId = auth?.claims.sub;
  if (!userId) redirect("/login");

  const { data: files } = await supabase.storage.from("documents").list(userId, { search: name, limit: 100 });
  const file = files?.find((f) => f.name === name && f.id !== null);
  if (!file) notFound();

  const kb = Math.max(1, Math.round(Number(file.metadata?.size ?? 0) / 1024));
  const meta = `${kb} KB · uploaded ${new Date(file.created_at ?? Date.now()).toLocaleDateString("en")}`;

  return (
    <main className="mx-auto max-w-2xl space-y-6 p-6">
      <h1 className="text-xl font-semibold">{name}</h1>
      <p>Hold the button to delete it. You get five seconds to undo before anything is sent.</p>
      <FileCard path={`${userId}/${name}`} name={name} meta={meta} />
      <details className="text-sm">
        <summary>Can&apos;t hold the button?</summary>
        <div className="mt-2">
          <FreeDeleteButton path={`${userId}/${name}`} name={name} />
        </div>
      </details>
    </main>
  );
}