FilePond

max-files / max-size / accept · tw-add / tw-remove / tw-reject

Preview

画像（accept=image/*）

非画像（accept=application/pdf）

PDF など非画像はサムネイルではなくファイル名とサイズを表示します。

拒否理由（max-files / max-size / accept）

1 件・1KB・PNG のみ。超過や不一致は tw-reject で reason が届きます。

（イベントログ）

HTML

<tw-file-pond max-files="3" max-size="1048576" accept="image/*"></tw-file-pond>

<tw-file-pond max-files="2" accept="application/pdf"></tw-file-pond>

<tw-file-pond
  id="pond-reject"
  max-files="1"
  max-size="1024"
  accept="image/png"
></tw-file-pond>
<pre id="pond-event-log"><code>（イベントログ）</code></pre>

import "@b4moss/the-wheels";

const log = document.getElementById("pond-event-log")?.querySelector("code");
const pond = document.getElementById("pond-reject");

const append = (line) => {
  if (!log) return;
  const prev = log.textContent === "（イベントログ）" ? "" : `${log.textContent}\n`;
  log.textContent = `${prev}${line}`;
};

pond?.addEventListener("tw-add", (event) => {
  append(`add: ${event.detail.file.name}`);
});
pond?.addEventListener("tw-remove", (event) => {
  append(`remove: ${event.detail.file.name}`);
});
pond?.addEventListener("tw-reject", (event) => {
  append(`reject: ${event.detail.file.name} (${event.detail.reason})`);
});

import "@b4moss/the-wheels";
import type { TwFilePond } from "@b4moss/the-wheels";

const log = document.getElementById("pond-event-log")?.querySelector("code");
const pond = document.getElementById("pond-reject") as TwFilePond | null;

const append = (line: string) => {
  if (!log) return;
  const prev = log.textContent === "（イベントログ）" ? "" : `${log.textContent}\n`;
  log.textContent = `${prev}${line}`;
};

pond?.addEventListener("tw-add", ((event: CustomEvent<{ file: File }>) => {
  append(`add: ${event.detail.file.name}`);
}) as EventListener);
pond?.addEventListener("tw-remove", ((event: CustomEvent<{ file: File }>) => {
  append(`remove: ${event.detail.file.name}`);
}) as EventListener);
pond?.addEventListener("tw-reject", ((
  event: CustomEvent<{ file: File; reason: string }>
) => {
  append(`reject: ${event.detail.file.name} (${event.detail.reason})`);
}) as EventListener);