Input Upload

A file upload input rendered as a labelled dropzone surface with a centered icon, title, helper description, and a styled trigger affordance. The whole surface is clickable to open the native file picker and accepts drag-and-drop. Drag state and selected files are owned by the shared core package, so Astro and Svelte adapters consume the same headless logic.

Feedback

Apply semantic feedback colors to indicate validation state or context (for example, a red dropzone after rejecting an oversized file).

AstroReactSvelteVue

PreviewCode

Choose a file or drag & drop it hereJPEG, PNG, PDF up to 50 MBChoose a file or drag & drop it hereJPEG, PNG, PDF up to 50 MBChoose a file or drag & drop it hereJPEG, PNG, PDF up to 50 MBChoose a file or drag & drop it hereJPEG, PNG, PDF up to 50 MBChoose a file or drag & drop it hereJPEG, PNG, PDF up to 50 MB

---
import InputUpload from "../InputUpload.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md", direction: "column" })}>
  <InputUpload feedback="neutral" description="JPEG, PNG, PDF up to 50 MB" />
  <InputUpload feedback="primary" description="JPEG, PNG, PDF up to 50 MB" />
  <InputUpload feedback="success" description="JPEG, PNG, PDF up to 50 MB" />
  <InputUpload feedback="danger" description="JPEG, PNG, PDF up to 50 MB" />
  <InputUpload feedback="warning" description="JPEG, PNG, PDF up to 50 MB" />
</div>

import { InputUpload } from "../InputUpload";
import { stack } from "@pindoba/styled-system/patterns";

export default function Feedback() {
  return (
    <div className={stack({ gap: "md", direction: "column" })}>
      <InputUpload
        feedback="neutral"
        description="JPEG, PNG, PDF up to 50 MB"
      />
      <InputUpload
        feedback="primary"
        description="JPEG, PNG, PDF up to 50 MB"
      />
      <InputUpload
        feedback="success"
        description="JPEG, PNG, PDF up to 50 MB"
      />
      <InputUpload feedback="danger" description="JPEG, PNG, PDF up to 50 MB" />
      <InputUpload
        feedback="warning"
        description="JPEG, PNG, PDF up to 50 MB"
      />
    </div>
  );
}

Choose a file or drag & drop it here JPEG, PNG, PDF up to 50 MB Choose a file or drag & drop it here JPEG, PNG, PDF up to 50 MB Choose a file or drag & drop it here JPEG, PNG, PDF up to 50 MB Choose a file or drag & drop it here JPEG, PNG, PDF up to 50 MB Choose a file or drag & drop it here JPEG, PNG, PDF up to 50 MB

<script lang="ts">
  import InputUpload from "../input-upload.svelte";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

<div class={stack({ gap: "md", direction: "column" })}>
  <InputUpload feedback="neutral" description="JPEG, PNG, PDF up to 50 MB" />
  <InputUpload feedback="primary" description="JPEG, PNG, PDF up to 50 MB" />
  <InputUpload feedback="success" description="JPEG, PNG, PDF up to 50 MB" />
  <InputUpload feedback="danger" description="JPEG, PNG, PDF up to 50 MB" />
  <InputUpload feedback="warning" description="JPEG, PNG, PDF up to 50 MB" />
</div>

<script setup lang="ts">
import { InputUpload } from "@pindoba/vue-input-upload";
import { stack } from "@pindoba/styled-system/patterns";
const col = stack({ gap: "md", direction: "column" });
const hint = "JPEG, PNG, PDF up to 50 MB";
</script>

<template>
  <div :class="col">
    <InputUpload feedback="neutral" :description="hint" />
    <InputUpload feedback="primary" :description="hint" />
    <InputUpload feedback="success" :description="hint" />
    <InputUpload feedback="danger" :description="hint" />
    <InputUpload feedback="warning" :description="hint" />
  </div>
</template>

Size

Four sizes scale the dropzone’s min-height, padding, icon, and typography together.

AstroReactSvelteVue

PreviewCode

Choose a file or drag & drop it hereExtra smallChoose a file or drag & drop it hereSmallChoose a file or drag & drop it hereMediumChoose a file or drag & drop it hereLarge

---
import InputUpload from "../InputUpload.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md", direction: "column" })}>
  <InputUpload size="xs" description="Extra small" />
  <InputUpload size="sm" description="Small" />
  <InputUpload size="md" description="Medium" />
  <InputUpload size="lg" description="Large" />
</div>

Choose a file or drag & drop it hereExtra smallChoose a file or drag & drop it hereSmallChoose a file or drag & drop it hereMediumChoose a file or drag & drop it hereLarge

import { InputUpload } from "../InputUpload";
import { stack } from "@pindoba/styled-system/patterns";

export default function Size() {
  return (
    <div className={stack({ gap: "md", direction: "column" })}>
      <InputUpload size="xs" description="Extra small" />
      <InputUpload size="sm" description="Small" />
      <InputUpload size="md" description="Medium" />
      <InputUpload size="lg" description="Large" />
    </div>
  );
}

Choose a file or drag & drop it here Extra small Choose a file or drag & drop it here Small Choose a file or drag & drop it here Medium Choose a file or drag & drop it here Large

<script lang="ts">
  import InputUpload from "../input-upload.svelte";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

<div class={stack({ gap: "md", direction: "column" })}>
  <InputUpload size="xs" description="Extra small" />
  <InputUpload size="sm" description="Small" />
  <InputUpload size="md" description="Medium" />
  <InputUpload size="lg" description="Large" />
</div>

Choose a file or drag & drop it hereExtra smallChoose a file or drag & drop it hereSmallChoose a file or drag & drop it hereMediumChoose a file or drag & drop it hereLarge

<script setup lang="ts">
import { InputUpload } from "@pindoba/vue-input-upload";
import { stack } from "@pindoba/styled-system/patterns";
const col = stack({ gap: "md", direction: "column" });
</script>

<template>
  <div :class="col">
    <InputUpload size="xs" description="Extra small" />
    <InputUpload size="sm" description="Small" />
    <InputUpload size="md" description="Medium" />
    <InputUpload size="lg" description="Large" />
  </div>
</template>

Slots

Override any slot — icon, title, description, or trigger — to customize the dropzone content. Pass strings via the matching props (title, description, trigger) for simple text overrides, or use named slots / snippets for rich content.

AstroReactSvelteVue

PreviewCode

Custom icon

Choose a file or drag & drop it hereJPEG or PNG, up to 10 MB

Rich title and description

Drop contracts hereAccepts .pdf, .doc, .docx

Custom trigger label

Upload your résuméOne PDF, 5 MB max

---
import InputUpload from "../InputUpload.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "xl", direction: "column" })}>
  <div>
    <h3>Custom icon</h3>
    <InputUpload accept="image/*" description="JPEG or PNG, up to 10 MB">
      <svg
        slot="icon"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="1.75"
        stroke-linecap="round"
        stroke-linejoin="round"
        aria-hidden="true"
      >
        <rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect>
        <circle cx="9" cy="9" r="2"></circle>
        <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"></path>
      </svg>
    </InputUpload>
  </div>

  <div>
    <h3>Rich title and description</h3>
    <InputUpload accept=".pdf,.doc,.docx" multiple>
      <Fragment slot="title">Drop <em>contracts</em> here</Fragment>
      <Fragment slot="description">
        Accepts <code>.pdf</code>, <code>.doc</code>, <code>.docx</code>
      </Fragment>
    </InputUpload>
  </div>

  <div>
    <h3>Custom trigger label</h3>
    <InputUpload
      title="Upload your résumé"
      description="One PDF, 5 MB max"
      trigger="Pick a PDF"
      accept="application/pdf"
    />
  </div>
</div>

Custom icon

Choose a file or drag & drop it hereJPEG or PNG, up to 10 MB

Rich title and description

Drop contracts hereAccepts .pdf, .doc, .docx

Custom trigger label

Upload your résuméOne PDF, 5 MB max

import { InputUpload } from "../InputUpload";
import { stack } from "@pindoba/styled-system/patterns";

export default function Slots() {
  return (
    <div className={stack({ gap: "xl", direction: "column" })}>
      <div>
        <h3>Custom icon</h3>
        <InputUpload
          accept="image/*"
          description="JPEG or PNG, up to 10 MB"
          icon={
            <svg
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="1.75"
              strokeLinecap="round"
              strokeLinejoin="round"
              aria-hidden="true"
            >
              <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
              <circle cx="9" cy="9" r="2" />
              <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
            </svg>
          }
        />
      </div>

      <div>
        <h3>Rich title and description</h3>
        <InputUpload
          accept=".pdf,.doc,.docx"
          multiple
          title={
            <>
              Drop <em>contracts</em> here
            </>
          }
          description={
            <>
              Accepts <code>.pdf</code>, <code>.doc</code>, <code>.docx</code>
            </>
          }
        />
      </div>

      <div>
        <h3>Custom trigger label</h3>
        <InputUpload
          title="Upload your résumé"
          description="One PDF, 5 MB max"
          trigger="Pick a PDF"
          accept="application/pdf"
        />
      </div>
    </div>
  );
}

Custom icon

Choose a file or drag & drop it here JPEG or PNG, up to 10 MB

Rich title and description

Drop contracts here Accepts .pdf, .doc, .docx

Custom trigger label

Upload your résumé One PDF, 5 MB max

<script lang="ts">
  import InputUpload from "../input-upload.svelte";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

<div class={stack({ gap: "xl", direction: "column" })}>
  <div>
    <h3>Custom icon</h3>
    <InputUpload accept="image/*" description="JPEG or PNG, up to 10 MB">
      {#snippet icon()}
        <svg
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="1.75"
          stroke-linecap="round"
          stroke-linejoin="round"
          aria-hidden="true"
        >
          <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
          <circle cx="9" cy="9" r="2" />
          <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
        </svg>
      {/snippet}
    </InputUpload>
  </div>

  <div>
    <h3>Rich title and description</h3>
    <InputUpload accept=".pdf,.doc,.docx" multiple>
      {#snippet title()}
        Drop <em>contracts</em> here
      {/snippet}
      {#snippet description()}
        Accepts <code>.pdf</code>, <code>.doc</code>, <code>.docx</code>
      {/snippet}
    </InputUpload>
  </div>

  <div>
    <h3>Custom trigger label</h3>
    <InputUpload
      title="Upload your résumé"
      description="One PDF, 5 MB max"
      trigger="Pick a PDF"
      accept="application/pdf"
    />
  </div>
</div>

Custom icon

Choose a file or drag & drop it hereJPEG or PNG, up to 10 MB

Rich title and description

Drop contracts here Accepts .pdf, .doc, .docx

Custom trigger label

Upload your résuméOne PDF, 5 MB max

<script setup lang="ts">
import { InputUpload } from "@pindoba/vue-input-upload";
import { stack } from "@pindoba/styled-system/patterns";
const col = stack({ gap: "xl", direction: "column" });
</script>

<template>
  <div :class="col">
    <div>
      <h3>Custom icon</h3>
      <InputUpload accept="image/*" description="JPEG or PNG, up to 10 MB">
        <template #icon>
          <svg
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="1.75"
            stroke-linecap="round"
            stroke-linejoin="round"
            aria-hidden="true"
          >
            <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
            <circle cx="9" cy="9" r="2" />
            <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
          </svg>
        </template>
      </InputUpload>
    </div>

    <div>
      <h3>Rich title and description</h3>
      <InputUpload accept=".pdf,.doc,.docx" multiple>
        <template #title>Drop <em>contracts</em> here</template>
        <template #description>
          Accepts <code>.pdf</code>, <code>.doc</code>, <code>.docx</code>
        </template>
      </InputUpload>
    </div>

    <div>
      <h3>Custom trigger label</h3>
      <InputUpload
        title="Upload your résumé"
        description="One PDF, 5 MB max"
        trigger="Pick a PDF"
        accept="application/pdf"
      />
    </div>
  </div>
</template>

Custom Styling

The passThrough prop provides per-slot escape hatches: style accepts a Panda CSS SystemStyleObject and props forwards arbitrary HTML attributes onto the slot element.

AstroReactSvelteVue

PreviewCode

Pill-shaped surface

Drop hereJPEG or PNG up to 5 MB

Solid border + accented icon

Upload your resumePDF only, 10 MB max

Accessibility props

Drop your avatar

---
import InputUpload from "../InputUpload.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "xl", direction: "column" })}>
  <div>
    <h3>Pill-shaped surface</h3>
    <InputUpload
      title="Drop here"
      description="JPEG or PNG up to 5 MB"
      passThrough={{
        root: { style: { borderRadius: "full" } },
      }}
    />
  </div>

  <div>
    <h3>Solid border + accented icon</h3>
    <InputUpload
      title="Upload your resume"
      description="PDF only, 10 MB max"
      trigger="Pick a file"
      passThrough={{
        root: { style: { borderStyle: "solid" } },
        icon: { style: { color: "primary.text" } },
      }}
    />
  </div>

  <div>
    <h3>Accessibility props</h3>
    <InputUpload
      title="Drop your avatar"
      passThrough={{
        input: {
          props: {
            "aria-label": "Upload avatar",
            "data-testid": "avatar-upload",
          },
        },
      }}
    />
  </div>
</div>

Pill-shaped surface

Drop hereJPEG or PNG up to 5 MB

Solid border + accented icon

Upload your resumePDF only, 10 MB max

Accessibility props

Drop your avatar

import { InputUpload } from "../InputUpload";
import { stack } from "@pindoba/styled-system/patterns";

export default function Custom() {
  return (
    <div className={stack({ gap: "xl", direction: "column" })}>
      <div>
        <h3>Pill-shaped surface</h3>
        <InputUpload
          title="Drop here"
          description="JPEG or PNG up to 5 MB"
          passThrough={{
            root: { style: { borderRadius: "full" } },
          }}
        />
      </div>

      <div>
        <h3>Solid border + accented icon</h3>
        <InputUpload
          title="Upload your resume"
          description="PDF only, 10 MB max"
          trigger="Pick a file"
          passThrough={{
            root: { style: { borderStyle: "solid" } },
            icon: { style: { color: "primary.text" } },
          }}
        />
      </div>

      <div>
        <h3>Accessibility props</h3>
        <InputUpload
          title="Drop your avatar"
          passThrough={{
            input: {
              props: {
                "aria-label": "Upload avatar",
                "data-testid": "avatar-upload",
              },
            },
          }}
        />
      </div>
    </div>
  );
}

Pill-shaped surface

Drop here JPEG or PNG up to 5 MB

Solid border + accented icon

Upload your resume PDF only, 10 MB max

Accessibility props

Drop your avatar

<script lang="ts">
  import InputUpload from "../input-upload.svelte";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

<div class={stack({ gap: "xl", direction: "column" })}>
  <div>
    <h3>Pill-shaped surface</h3>
    <InputUpload
      title="Drop here"
      description="JPEG or PNG up to 5 MB"
      passThrough={{
        root: { style: { borderRadius: "full" } },
      }}
    />
  </div>

  <div>
    <h3>Solid border + accented icon</h3>
    <InputUpload
      title="Upload your resume"
      description="PDF only, 10 MB max"
      trigger="Pick a file"
      passThrough={{
        root: { style: { borderStyle: "solid" } },
        icon: { style: { color: "primary.text" } },
      }}
    />
  </div>

  <div>
    <h3>Accessibility props</h3>
    <InputUpload
      title="Drop your avatar"
      passThrough={{
        input: {
          props: {
            "aria-label": "Upload avatar",
            "data-testid": "avatar-upload",
          },
        },
      }}
    />
  </div>
</div>

Pill-shaped surface

Drop hereJPEG or PNG up to 5 MB

Solid border + accented icon

Upload your resumePDF only, 10 MB max

Accessibility props

Drop your avatar

<script setup lang="ts">
import { InputUpload } from "@pindoba/vue-input-upload";
import { stack } from "@pindoba/styled-system/patterns";
const col = stack({ gap: "xl", direction: "column" });
</script>

<template>
  <div :class="col">
    <div>
      <h3>Pill-shaped surface</h3>
      <InputUpload
        title="Drop here"
        description="JPEG or PNG up to 5 MB"
        :passThrough="{ root: { style: { borderRadius: 'full' } } }"
      />
    </div>

    <div>
      <h3>Solid border + accented icon</h3>
      <InputUpload
        title="Upload your resume"
        description="PDF only, 10 MB max"
        trigger="Pick a file"
        :passThrough="{
          root: { style: { borderStyle: 'solid' } },
          icon: { style: { color: 'primary.text' } },
        }"
      />
    </div>

    <div>
      <h3>Accessibility props</h3>
      <InputUpload
        title="Drop your avatar"
        :passThrough="{
          input: {
            props: {
              'aria-label': 'Upload avatar',
              'data-testid': 'avatar-upload',
            },
          },
        }"
      />
    </div>
  </div>
</template>

Upload Button

For compact entry points where a full dropzone is overkill, use the sibling <UploadButton> component. It renders a real Pindoba <Button> that opens the file picker on click and still accepts drag-and-drop on its surface. Forward emphasis and feedback to pick the button look — they’re passed straight through to the underlying button.

AstroReactSvelteVue

PreviewCode

---
import UploadButtonComponent from "../UploadButton.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md", direction: "column", align: "flex-start" })}>
  <UploadButtonComponent emphasis="primary" label="Upload" />
  <UploadButtonComponent emphasis="secondary" label="Upload" />
  <UploadButtonComponent emphasis="ghost" label="Upload" />
  <UploadButtonComponent emphasis="primary" feedback="danger" label="Upload" />
  <UploadButtonComponent
    emphasis="secondary"
    label="Upload (max 1 KB)"
    maxSize={1024}
  />
</div>

import { UploadButton } from "../UploadButton";
import { stack } from "@pindoba/styled-system/patterns";

export default function UploadButtonDemo() {
  return (
    <div
      className={stack({ gap: "md", direction: "column", align: "flex-start" })}
    >
      <UploadButton emphasis="primary" label="Upload" />
      <UploadButton emphasis="secondary" label="Upload" />
      <UploadButton emphasis="ghost" label="Upload" />
      <UploadButton emphasis="primary" feedback="danger" label="Upload" />
      <UploadButton
        emphasis="secondary"
        label="Upload (max 1 KB)"
        maxSize={1024}
      />
    </div>
  );
}

<script lang="ts">
  import UploadButton from "../upload-button.svelte";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

<div class={stack({ gap: "md", direction: "column", align: "flex-start" })}>
  <UploadButton emphasis="primary" label="Upload" />
  <UploadButton emphasis="secondary" label="Upload" />
  <UploadButton emphasis="ghost" label="Upload" />
  <UploadButton emphasis="primary" feedback="danger" label="Upload" />
  <UploadButton emphasis="secondary" label="Upload (max 1 KB)" maxSize={1024} />
</div>

<script setup lang="ts">
import { UploadButton } from "@pindoba/vue-input-upload";
import { stack } from "@pindoba/styled-system/patterns";
const col = stack({ gap: "md", direction: "column", align: "flex-start" });
</script>

<template>
  <div :class="col">
    <UploadButton emphasis="primary" label="Upload" />
    <UploadButton emphasis="secondary" label="Upload" />
    <UploadButton emphasis="ghost" label="Upload" />
    <UploadButton emphasis="primary" feedback="danger" label="Upload" />
    <UploadButton
      emphasis="secondary"
      label="Upload (max 1 KB)"
      :maxSize="1024"
    />
  </div>
</template>

Validation

Built-in validation rejects files that exceed maxSize, surpass maxFiles, fail imageDimensions checks, or are flagged by a custom validate function. Rejected files are reported via onReject (Svelte) or a pindoba:reject CustomEvent (Astro). Combine with feedback="danger" to indicate the error state.

In Astro, custom function-based validators are registered on window.pindobaValidators and referenced by name through the validatorName prop, since functions can’t be passed through frontmatter to inline scripts.

AstroReactSvelteVue

PreviewCode

Max file size

Choose a file or drag & drop it hereUp to 2 MB

Max file count

Choose a file or drag & drop it hereUp to 2 files

Image dimensions

Choose a file or drag & drop it hereSquare images, 200×200 to 2000×2000

Custom validator

Choose a file or drag & drop it hereFilename cannot contain spaces

---
import InputUpload from "../InputUpload.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "xl", direction: "column" })}>
  <div data-demo="size">
    <h3>Max file size</h3>
    <InputUpload
      accept="image/*,application/pdf"
      description="Up to 2 MB"
      maxSize={2 * 1024 * 1024}
    />
    <p
      data-demo-error="size"
      style="color: var(--colors-danger-text); margin-top: 8px;"
    >
    </p>
  </div>

  <div data-demo="count">
    <h3>Max file count</h3>
    <InputUpload multiple description="Up to 2 files" maxFiles={2} />
    <p
      data-demo-error="count"
      style="color: var(--colors-danger-text); margin-top: 8px;"
    >
    </p>
  </div>

  <div data-demo="image">
    <h3>Image dimensions</h3>
    <InputUpload
      accept="image/*"
      description="Square images, 200×200 to 2000×2000"
      imageDimensions={{
        minWidth: 200,
        maxWidth: 2000,
        minHeight: 200,
        maxHeight: 2000,
        aspectRatio: 1,
        aspectRatioTolerance: 0.05,
      }}
    />
    <p
      data-demo-error="image"
      style="color: var(--colors-danger-text); margin-top: 8px;"
    >
    </p>
  </div>

  <div data-demo="custom">
    <h3>Custom validator</h3>
    <InputUpload
      description="Filename cannot contain spaces"
      validatorName="noSpaces"
    />
    <p
      data-demo-error="custom"
      style="color: var(--colors-danger-text); margin-top: 8px;"
    >
    </p>
  </div>
</div>

<script>
  window.pindobaValidators = window.pindobaValidators ?? {};
  window.pindobaValidators.noSpaces = (file: File) =>
    /\s/.test(file.name) ? "Filename has spaces" : null;

  type RejectDetail = {
    rejections: { file: File; message: string }[];
  };

  document.querySelectorAll<HTMLElement>("[data-demo]").forEach((wrapper) => {
    const id = wrapper.dataset.demo;
    const root = wrapper.querySelector<HTMLElement>("[data-input-upload-root]");
    const errorEl = wrapper.querySelector<HTMLElement>(
      `[data-demo-error="${id}"]`,
    );
    if (!root || !errorEl) return;
    root.addEventListener("pindoba:reject", (e) => {
      const detail = (e as CustomEvent<RejectDetail>).detail;
      errorEl.textContent = detail.rejections
        .map((r) => `${r.file.name}: ${r.message}`)
        .join(", ");
      root.setAttribute("data-feedback-state", "danger");
    });
    root.addEventListener("pindoba:files", () => {
      errorEl.textContent = "";
    });
  });
</script>

Max file size

Choose a file or drag & drop it hereUp to 2 MB

Max file count

Choose a file or drag & drop it hereUp to 2 files

Image dimensions

Choose a file or drag & drop it hereSquare images, 200×200 to 2000×2000

Custom validator

Choose a file or drag & drop it hereFilename cannot contain spaces

import { useState } from "react";
import { InputUpload } from "../InputUpload";
import { stack } from "@pindoba/styled-system/patterns";
import type { UploadRejection } from "@pindoba/core-input-upload";

function formatRejections(rejections: UploadRejection[]): string {
  return rejections.map((r) => `${r.file.name}: ${r.message}`).join(", ");
}

export default function Validation() {
  const [sizeError, setSizeError] = useState<string | null>(null);
  const [countError, setCountError] = useState<string | null>(null);
  const [imageError, setImageError] = useState<string | null>(null);
  const [customError, setCustomError] = useState<string | null>(null);

  return (
    <div className={stack({ gap: "xl", direction: "column" })}>
      <div>
        <h3>Max file size</h3>
        <InputUpload
          accept="image/*,application/pdf"
          description="Up to 2 MB"
          maxSize={2 * 1024 * 1024}
          feedback={sizeError ? "danger" : "neutral"}
          onFilesChange={() => setSizeError(null)}
          onReject={(r) => setSizeError(formatRejections(r))}
        />
        {sizeError && (
          <p style={{ color: "var(--colors-danger-text)", marginTop: "8px" }}>
            {sizeError}
          </p>
        )}
      </div>

      <div>
        <h3>Max file count</h3>
        <InputUpload
          multiple
          description="Up to 2 files"
          maxFiles={2}
          feedback={countError ? "danger" : "neutral"}
          onFilesChange={() => setCountError(null)}
          onReject={(r) => setCountError(formatRejections(r))}
        />
        {countError && (
          <p style={{ color: "var(--colors-danger-text)", marginTop: "8px" }}>
            {countError}
          </p>
        )}
      </div>

      <div>
        <h3>Image dimensions</h3>
        <InputUpload
          accept="image/*"
          description="Square images, 200×200 to 2000×2000"
          imageDimensions={{
            minWidth: 200,
            maxWidth: 2000,
            minHeight: 200,
            maxHeight: 2000,
            aspectRatio: 1,
            aspectRatioTolerance: 0.05,
          }}
          feedback={imageError ? "danger" : "neutral"}
          onFilesChange={() => setImageError(null)}
          onReject={(r) => setImageError(formatRejections(r))}
        />
        {imageError && (
          <p style={{ color: "var(--colors-danger-text)", marginTop: "8px" }}>
            {imageError}
          </p>
        )}
      </div>

      <div>
        <h3>Custom validator</h3>
        <InputUpload
          description="Filename cannot contain spaces"
          validate={(file) =>
            /\s/.test(file.name) ? "Filename has spaces" : null
          }
          feedback={customError ? "danger" : "neutral"}
          onFilesChange={() => setCustomError(null)}
          onReject={(r) => setCustomError(formatRejections(r))}
        />
        {customError && (
          <p style={{ color: "var(--colors-danger-text)", marginTop: "8px" }}>
            {customError}
          </p>
        )}
      </div>
    </div>
  );
}

Max file size

Choose a file or drag & drop it here Up to 2 MB

Max file count

Choose a file or drag & drop it here Up to 2 files

Image dimensions

Choose a file or drag & drop it here Square images, 200×200 to 2000×2000

Custom validator

Choose a file or drag & drop it here Filename cannot contain spaces

<script lang="ts">
  import InputUpload from "../input-upload.svelte";
  import { stack } from "@pindoba/styled-system/patterns";
  import type { UploadRejection } from "@pindoba/core-input-upload";

  let sizeError = $state<string | null>(null);
  let countError = $state<string | null>(null);
  let imageError = $state<string | null>(null);
  let customError = $state<string | null>(null);

  function formatRejections(rejections: UploadRejection[]): string {
    return rejections.map((r) => `${r.file.name}: ${r.message}`).join(", ");
  }
</script>

<div class={stack({ gap: "xl", direction: "column" })}>
  <div>
    <h3>Max file size</h3>
    <InputUpload
      accept="image/*,application/pdf"
      description="Up to 2 MB"
      maxSize={2 * 1024 * 1024}
      feedback={sizeError ? "danger" : "neutral"}
      onFilesChange={() => (sizeError = null)}
      onReject={(r) => (sizeError = formatRejections(r))}
    />
    {#if sizeError}
      <p style="color: var(--colors-danger-text); margin-top: 8px;">
        {sizeError}
      </p>
    {/if}
  </div>

  <div>
    <h3>Max file count</h3>
    <InputUpload
      multiple
      description="Up to 2 files"
      maxFiles={2}
      feedback={countError ? "danger" : "neutral"}
      onFilesChange={() => (countError = null)}
      onReject={(r) => (countError = formatRejections(r))}
    />
    {#if countError}
      <p style="color: var(--colors-danger-text); margin-top: 8px;">
        {countError}
      </p>
    {/if}
  </div>

  <div>
    <h3>Image dimensions</h3>
    <InputUpload
      accept="image/*"
      description="Square images, 200×200 to 2000×2000"
      imageDimensions={{
        minWidth: 200,
        maxWidth: 2000,
        minHeight: 200,
        maxHeight: 2000,
        aspectRatio: 1,
        aspectRatioTolerance: 0.05,
      }}
      feedback={imageError ? "danger" : "neutral"}
      onFilesChange={() => (imageError = null)}
      onReject={(r) => (imageError = formatRejections(r))}
    />
    {#if imageError}
      <p style="color: var(--colors-danger-text); margin-top: 8px;">
        {imageError}
      </p>
    {/if}
  </div>

  <div>
    <h3>Custom validator</h3>
    <InputUpload
      description="Filename cannot contain spaces"
      validate={(file) => (/\s/.test(file.name) ? "Filename has spaces" : null)}
      feedback={customError ? "danger" : "neutral"}
      onFilesChange={() => (customError = null)}
      onReject={(r) => (customError = formatRejections(r))}
    />
    {#if customError}
      <p style="color: var(--colors-danger-text); margin-top: 8px;">
        {customError}
      </p>
    {/if}
  </div>
</div>

Max file size

Choose a file or drag & drop it hereUp to 2 MB

Max file count

Choose a file or drag & drop it hereUp to 2 files

Image dimensions

Choose a file or drag & drop it hereSquare images, 200×200 to 2000×2000

Custom validator

Choose a file or drag & drop it hereFilename cannot contain spaces

<script setup lang="ts">
import { ref } from "vue";
import { InputUpload } from "@pindoba/vue-input-upload";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";
import type { UploadRejection } from "@pindoba/core-input-upload";

const col = stack({ gap: "xl", direction: "column" });
const errorText = css({ color: "danger.text", marginTop: "xs" });

const sizeError = ref<string | null>(null);
const countError = ref<string | null>(null);
const imageError = ref<string | null>(null);
const customError = ref<string | null>(null);

function format(rejections: UploadRejection[]): string {
  return rejections.map((r) => `${r.file.name}: ${r.message}`).join(", ");
}
// Bound in the script, not the template: Vue unwraps refs in templates, so
// `reject(sizeError)` there would hand over the string value, not the ref.
const reject = (target: typeof sizeError) => (r: UploadRejection[]) => {
  target.value = format(r);
};
const clear = (target: typeof sizeError) => () => {
  target.value = null;
};

const onSizeReject = reject(sizeError);
const onSizeClear = clear(sizeError);
const onCountReject = reject(countError);
const onCountClear = clear(countError);
const onImageReject = reject(imageError);
const onImageClear = clear(imageError);
const onCustomReject = reject(customError);
const onCustomClear = clear(customError);

const noSpaces = (file: File) =>
  /\s/.test(file.name) ? "Filename has spaces" : null;
</script>

<template>
  <div :class="col">
    <div>
      <h3>Max file size</h3>
      <InputUpload
        accept="image/*,application/pdf"
        description="Up to 2 MB"
        :maxSize="2 * 1024 * 1024"
        :feedback="sizeError ? 'danger' : 'neutral'"
        :onFilesChange="onSizeClear"
        :onReject="onSizeReject"
      />
      <p v-if="sizeError" :class="errorText">{{ sizeError }}</p>
    </div>

    <div>
      <h3>Max file count</h3>
      <InputUpload
        multiple
        description="Up to 2 files"
        :maxFiles="2"
        :feedback="countError ? 'danger' : 'neutral'"
        :onFilesChange="onCountClear"
        :onReject="onCountReject"
      />
      <p v-if="countError" :class="errorText">{{ countError }}</p>
    </div>

    <div>
      <h3>Image dimensions</h3>
      <InputUpload
        accept="image/*"
        description="Square images, 200×200 to 2000×2000"
        :imageDimensions="{
          minWidth: 200,
          maxWidth: 2000,
          minHeight: 200,
          maxHeight: 2000,
          aspectRatio: 1,
          aspectRatioTolerance: 0.05,
        }"
        :feedback="imageError ? 'danger' : 'neutral'"
        :onFilesChange="onImageClear"
        :onReject="onImageReject"
      />
      <p v-if="imageError" :class="errorText">{{ imageError }}</p>
    </div>

    <div>
      <h3>Custom validator</h3>
      <InputUpload
        description="Filename cannot contain spaces"
        :validate="noSpaces"
        :feedback="customError ? 'danger' : 'neutral'"
        :onFilesChange="onCustomClear"
        :onReject="onCustomReject"
      />
      <p v-if="customError" :class="errorText">{{ customError }}</p>
    </div>
  </div>
</template>

#Feedback

#Size

#Slots

Custom icon

Rich title and description

Custom trigger label

#Custom Styling

Pill-shaped surface

Solid border + accented icon

Accessibility props

#Upload Button

#Validation

Max file size

Max file count

Image dimensions

Custom validator

Feedback

Size

Slots

Custom Styling

Upload Button

Validation