Files UI

import { Dropzone, FileMosaic } from "@files-ui/react";
import { CropDialog, useCropDialog } from "@files-ui/crop/react";
import { compressImage } from "@files-ui/compress";

function ImageUploader() {
  const [files, setFiles] = useState([]);
  const { cropFile, openCrop, closeCrop, handleCropComplete } = useCropDialog({
    onComplete: async (croppedFile) => {
      // Compress after crop
      const compressed = await compressImage(croppedFile, {
        maxWidthOrHeight: 1920,
        quality: 0.85
      });
      updateFile(compressed);
    }
  });

  return (
    <>
      <Dropzone onChange={setFiles} value={files}>
        {files.map(file => (
          <FileMosaic key={file.id} {...file} onEdit={openCrop} />
        ))}
      </Dropzone>
      
      {cropFile && (
        <CropDialog
          file={cropFile}
          onComplete={handleCropComplete}
          onCancel={closeCrop}
        />
      )}
    </>
  );
}

import { Dropzone, FileMosaic, FilesUiProvider } from "@files-ui/react";

// Global dark mode
function App() {
  return (
    <FilesUiProvider config={{ darkMode: true }}>
      <Dropzone onChange={setFiles} value={files}>
        {files.map(file => (
          <FileMosaic key={file.id} {...file} />
        ))}
      </Dropzone>
    </FilesUiProvider>
  );
}

// Per-component dark mode
<FileMosaic {...file} darkMode />
<FileCard {...file} darkMode />

function FileSelector() {
  const [files, setFiles] = useState([]);
  const [selected, setSelected] = useState(new Set());

  const handleSelect = (fileId, isSelected) => {
    setSelected(prev => {
      const next = new Set(prev);
      isSelected ? next.add(fileId) : next.delete(fileId);
      return next;
    });
  };

  return (
    <Dropzone onChange={setFiles} value={files}>
      {files.map(file => (
        <FileMosaic
          key={file.id}
          {...file}
          selectable
          selected={selected.has(file.id)}
          onSelect={handleSelect}
        />
      ))}
    </Dropzone>
  );
}

// app/actions/upload.ts
"use server";
export async function uploadFile(formData: FormData) {
  const file = formData.get("file") as File;
  // Process file...
  return { success: true, message: `Uploaded ${file.name}` };
}

// app/uploader.tsx
"use client";
import { Dropzone } from "@files-ui/react/client/dropzone";
import { uploadFile } from "./actions/upload";

export function Uploader() {
  return <Dropzone action={uploadFile} />;
}

import { useFilesUI } from "@files-ui/react";

function CustomUploader() {
  const { files, uploadFiles, getDragHandlers, getInputProps } = useFilesUI({
    accept: "image/*",
    maxFileSize: 5 * 1024 * 1024,
    url: "/api/upload"
  });

  return (
    <div {...getDragHandlers()} className="my-dropzone">
      <input {...getInputProps()} />
      <button onClick={() => uploadFiles()}>
        Upload {files.length} files
      </button>
    </div>
  );
}