FileSelector

Select a file or folder.
This component wraps NodeSelector with component="file" and adds file-type validation through accept.

File

This is a field description.

Example

<script>
  import { FileSelector } from '@soleil-se/config-svelte';
</script>

<FileSelector name="file" label="File" description="This is a field description." />

Props

Prop	Type	Description
`types`	`FileNodeType \| FileNodeType[]` `'sv:file' \| 'sv:folder'`	Restricts selectable node types to files or folders.
`accept`	`string \| string[]`	Accepted file extensions or MIME types.

The following props are inherited from the NodeSelector component.

Prop	Type	Description
`label` required	`string \| Snippet`	Field label, a string or Svelte snippet.
`value` $bindable	`string`	Selected node ID. An initial Sitevision node object from the configuration is normalized to its ID.
`displayName` $bindable	`string`	Display name of the selected node, initialized from the configuration node’s display name or path when available.
`name`	`string`	Configuration key and HTML name attribute.
`description`	`string \| Snippet`	Description shown below the field, a string or Svelte snippet.
`required`	`boolean`	Set the field as required. Default: `false`
`disabled`	`boolean`	Disables the field. Default: `false`
`removable`	`boolean`	Whether the value can be cleared. Default: `true`
`show`	`boolean`	Shows or hides the selector without destroying it. Default: `true`
`class`	`string`	CSS class added to the form-group wrapper.
`children`	`Snippet`	Content rendered after the selector and validation message.
`onChange`	`function` `(value: string, event: Event) => void`	Called on a selection change.
`validate`	`function` `(context: ValidationContext<string>) => ValidationResult`	Custom validator.

File-type validation

By default, all file types are accepted. The accept prop specifies the accepted file types, as a comma-separated string or an array.
Supports extensions such as '.pdf', MIME types such as 'application/pdf', and MIME wildcards such as 'image/*'.

<script>
  import { FileSelector } from '@soleil-se/config-svelte';
</script>

<FileSelector
  name="attachment"
  label="Bilaga"
  accept=".pdf"
/>

<FileSelector
  name="attachment"
  label="Bilaga"
  accept="image/*"
/>

<FileSelector
  name="attachment"
  label="Bilaga"
  accept={['.pdf', '.docx']}
/>

File-type validation is case-insensitive and checks the selected node’s display name. MIME types are inferred from the filename extension using the package’s built-in mapping, not from the file contents. If no filename is available, the file-type check is skipped.

Without a custom validate prop, the selector applies the standard required-field validation and the accept check. An empty selection is allowed unless required is set. Validation errors are displayed below the selector and prevent saving.

A custom validate prop replaces both the default required-field validation and the accept check. The underlying NodeSelector still checks whether the selected node is marked as trashed.

Snippets

label and description accept text or Svelte snippets.
Default child content is rendered after the selector and validation message.

<script>
  import { FileSelector } from '@soleil-se/config-svelte';
</script>

<FileSelector name="node">
  {#snippet label()}
    Välj <strong>innehåll</strong>
  {/snippet}
  {#snippet description()}
    Innehåll som används i <strong>appen</strong>.
  {/snippet}
  <p>Ytterligare information.</p>
</FileSelector>