Sortable Image Gallery

An image gallery uploader that allows reordering completed items using drag and drop.

Previewmock transport

Code

import { UplofileRoot } from "@/components/ui/uplofile";
import { mockUpload } from "@/lib/utils.ts";
import { SortableGalleryGrid } from "./sortablegallery.grid.demo.tsx";

export default function SortableGalleryDemo() {
  return (
    <UplofileRoot upload={mockUpload} accept="image/*" multiple>
      <SortableGalleryGrid />
    </UplofileRoot>
  );
}

Notes

Integrated with @dnd-kit for smooth drag-and-drop
Only completed items (status === 'done') are draggable
Drag handle appears on hover in the top-left corner
Reordering is preserved through the setItems callback