File

You can use the File to handle file inputs. It supports single and multiple files.

Usage

<script lang="ts">
  import { File } from "@tuentyfaiv/svelte-form";
</script>

<File name="cover" />
<!-- Or -->
<File name="cover">
  Custom label
  <svelte:fragment slot="preview" let:cover>
    Custom preview
    <img src={cover.src} alt={cover.alt} />
  </svelte:fragment>
  <svelte:fragment slot="retry">
    Retry
  </svelte:fragment>
  <svelte:fragment slot="error" let:error>
    {formatError(error)}
  </svelte:fragment>
</File>

Props

Prop	Type	Default	Description
name	string	-	The name of the field.
label	string | undefined | null	”Drag and drop a file here, or click to select a file to upload.”	The label of the field.
context	string	”form”	The context of the form.
id	string | undefined | null	null	The id of the field.
dragable	boolean	true	If the field is dragable.
multiple	boolean	false	If the field is multiple.
disabled	boolean	false	If the field is disabled.
accept	string	”image/*“	The accept of the field.
max	number	Infinity	The max size of each file.
styles	FileStyles	{}	The styles of the field.
clearOnDestroy	boolean	false	Clear the field value when the component is destroyed.

Slots

Slot	Prop	Description	Available to
default	-	Customize the label of the field.	all
preview	{ cover: { src: string; alt: string; } | null; file: File; }	Customize the preview of the field.	all
remove	-	Customize the remove icon.	all
retry	-	Customize the retry action.	all
error	{ error: string | null }	Show an error message.	all

Events

Name	Type	Description
choose	(file: File | File[]) => void	The event emitted when the user choose a file.
remove	() => void	The event emitted when the user remove a file.

Single image

Example

Drag and drop a file here, or click to select a file to upload.

Code

<script lang="ts">
  import { File, faivform } from "@tuentyfaiv/svelte-form";

  import type { FieldsSchema } from "@tuentyfaiv/svelte-form";

  const schema = {
    avatar: {
      type: "file",
      required: true,
    },
  } satisfies FieldsSchema;

  faivform({ fields: schema });
</script>

<File name="avatar" />

Multiple images

Example

Drag and drop a file here, or click to select a file to upload.

Code

<script lang="ts">
  import { File, faivform } from "@tuentyfaiv/svelte-form";

  import type { FieldsSchema } from "@tuentyfaiv/svelte-form";

  const schema = {
    covers: {
      type: "array",
      required: true,
      item: {
        type: "file",
        required: true,
      },
    },
  } satisfies FieldsSchema;

  faivform({ fields: schema });
</script>

<File name="covers" multiple />

Single not image

Example

Drag and drop a file here, or click to select a file to upload.

Code

<script lang="ts">
  import { File, faivform } from "@tuentyfaiv/svelte-form";

  import type { FieldsSchema } from "@tuentyfaiv/svelte-form";

  const schema = {
    document: {
      type: "file",
      required: true,
    },
  } satisfies FieldsSchema;

  faivform({ fields: schema });
</script>

<File name="document" accept=".pdf" />

Multiple not images

Example

Drag and drop a file here, or click to select a file to upload.

Code

<script lang="ts">
  import { File, faivform } from "@tuentyfaiv/svelte-form";

  import type { FieldsSchema } from "@tuentyfaiv/svelte-form";

  const schema = {
    documents: {
      type: "array",
      required: true,
      item: {
        type: "file",
        required: true,
      },
    },
  } satisfies FieldsSchema;

  faivform({ fields: schema });
</script>

<File name="documents" multiple accept=".pdf" />

Disabled

Example

Drag and drop a file here, or click to select a file to upload.

Code

<script lang="ts">
  import { File, faivform } from "@tuentyfaiv/svelte-form";

  import type { FieldsSchema } from "@tuentyfaiv/svelte-form";

  const schema = {
    profile: {
      type: "file",
      required: true,
    },
  } satisfies FieldsSchema;

  faivform({ fields: schema });
</script>

<File name="profile" disabled />