# FileSelector

Select a file or folder.\
This component wraps [NodeSelector](/packages/config-svelte/components/base/nodeselector) with `component="file"` and adds file-type validation through `accept`.

## Example

```svelte
<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[]`Mer information```ts
'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`Mer information```ts
(value: string, event: Event) => void
```                    | Called on a selection change.                                                                                     |
| `validate`             | `function`Mer information```ts
(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/*'`.

```svelte
<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.

**App.svelte**

```svelte
<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>
```