File Upload

import { FileUploadField } from "@px-ui/forms";

export function Uploader() {
  return (
    <FileUploadField
      accept="image/*,.pdf,.doc,.docx"
      maxSize={10 * 1024 * 1024}
      onFilesChange={(files) => console.log(files)}
    />
  );
}

import { FileUploadField } from "@px-ui/forms";

export function UploaderWithUpload() {
  return (
    <FileUploadField
      accept="image/*,.pdf"
      multiple
      maxFiles={5}
      maxSize={5 * 1024 * 1024}
      upload={{
        getPresignedUrl: async ({ filename, contentType, size }) => {
          const res = await fetch("/api/get-upload-url", {
            method: "POST",
            body: JSON.stringify({ filename, contentType, size }),
          });
          const data = await res.json();

          return {
            result: {
              url: data.url,
              fullPath: data.fullPath,
            },
          };
        },
        uploadFile: async (url, file, presignedData, onProgress) => {
          // Implement upload to `url` and call `onProgress(0..100)`.
          // Return the final URL (or rely on `presignedData.fullPath`).
          await fetch(url, { method: "PUT", body: file });

          onProgress?.(100);
          return { result: { url: presignedData.fullPath } };
        },
      }}
    />
  );
}

import { FileUpload, useFileUpload } from "@px-ui/core";

export function CustomDropzone() {
  const upload = useFileUpload({
    onFilesChange: (files) => console.log(files),
  });

  return (
    <FileUpload.Root upload={upload}>
      <FileUpload.Dropzone />
    </FileUpload.Root>
  );
}

import { FileUploadField } from "@px-ui/forms";

export function AvatarUpload() {
  return (
    <FileUploadField
      accept="image/*"
      maxSize={2 * 1024 * 1024}
      showFileList={false}
      render={(props, state) => (
        <div
          {...props}
          className={`flex size-32 cursor-pointer items-center justify-center rounded-full bg-neutral-100 transition-colors ${
            state.isDragging ? "border-2 border-dashed border-blue-500" : ""
          }`}
        >
          {state.files.length > 0 ? (
            <img
              src={state.files[0].preview}
              alt="Avatar"
              className="size-full rounded-full object-cover"
            />
          ) : (
            <div className="flex flex-col items-center justify-center text-neutral-500">
              <UserIcon className="size-10" />
              <span className="mt-1 text-xs">Upload</span>
            </div>
          )}
        </div>
      )}
    />
  );
}

import { FileUpload, useFileUpload, Button } from "@px-ui/core";

export function FormResetDemo() {
  const [name, setName] = useState("");
  const upload = useFileUpload({
    multiple: true,
    upload: { getPresignedUrl, uploadFile },
    onFilesChange: (files) => console.log("Files changed:", files),
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("Submitted:", { name, files: upload.files });
  };

  const handleReset = () => {
    setName("");
    upload.reset(); // Clears files, cancels uploads, increments instanceKey
  };

  return (
    <form onSubmit={handleSubmit}>
      <input value={name} onChange={(e) => setName(e.target.value)} />

      {/* Use instanceKey to force remount on reset */}
      <FileUpload.Root key={upload.instanceKey} upload={upload} multiple>
        <FileUpload.Dropzone size="sm" />
        <FileUpload.List>
          {(files) => files.map((file) => (
            <FileUpload.ListItem key={file.id} file={file} />
          ))}
        </FileUpload.List>
      </FileUpload.Root>

      <Button type="submit">Submit</Button>
      <Button type="button" onClick={handleReset}>Reset</Button>
    </form>
  );
}

import { getFileTypeIcon } from "@px-ui/core";

// Get the icon component for a file
const Icon = getFileTypeIcon({ name: "document.pdf", type: "application/pdf" });

// Use it like any React component
<Icon className="size-5" />