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
  <p slot="preview">
    Custom preview
  </p>
  <span slot="retry">
    Retry
  </span>
  <span slot="error" let:error>
    {formatError(error)}
  </span>
</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.
datas	Record<string, string | boolean | number> | undefined	{}	Datasets of the field container.

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 action.	all
retry	-	Customize the retry action.	all
error	{ error: string | null }	Show an error message.	all

Events

Name	Type	Description
choose	CustomEvent<File | File[]>	The event emitted when the user choose a file.
remove	CustomEvent<void>	The event emitted when the user remove a file.
retry	CustomEvent<void>	The event emitted when the user retry 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 />