# Files

A files select field that allows you to select one or more files out of a given set. A reference to this file is stored in the content file.

****

- Read more: <https://getkirby.com/docs/guide/blueprints/fields>
- Source: <https://github.com/getkirby/kirby/tree/5.5.3/config/fields/files.php>

****

The files field is basically a select/multiselect field specialized to allow you to select one or more files out of a given set of options. A reference to the selected file(s) is stored in the content file of the respective model (page, user, file). A files field also allows you to upload files (not, however to delete or otherwise manipulate files, see also <a href="https://getkirby.com/docs/reference/panel/sections/files">files section</a>).

<figure class="image"><a data-lightbox href="https://assets.getkirby.com/media/pages/docs/reference/panel/fields/files/85c5f76922-1717846665/files.png?width=1416&amp;height=328&amp;enlarge=0"><img alt="" class="rounded" height="214" loading="lazy" sizes="auto" src="https://assets.getkirby.com/media/pages/docs/reference/panel/fields/files/85c5f76922-1717846665/files.png?width=924&amp;height=214&amp;enlarge=0" srcset="https://assets.getkirby.com/media/pages/docs/reference/panel/fields/files/85c5f76922-1717846665/files.png?width=462&amp;height=107&amp;enlarge=0 462w, https://assets.getkirby.com/media/pages/docs/reference/panel/fields/files/85c5f76922-1717846665/files.png?width=690&amp;height=160&amp;enlarge=0 690w, https://assets.getkirby.com/media/pages/docs/reference/panel/fields/files/85c5f76922-1717846665/files.png?width=924&amp;height=214&amp;enlarge=0 924w, https://assets.getkirby.com/media/pages/docs/reference/panel/fields/files/85c5f76922-1717846665/files.png?width=1380&amp;height=320&amp;enlarge=0 1380w, https://assets.getkirby.com/media/pages/docs/reference/panel/fields/files/85c5f76922-1717846665/files.png?width=1416&amp;height=328&amp;enlarge=0 1848w" width="924"></a></figure>

## Example

```yaml
fields:
  downloads:
    label: Downloads
    type: files
```

## Field properties



<div class="table">
	<table class="parameters">
		<thead>
			<tr>
				<th>Name</th>
				<th>Type</th>
				<th>Default</th>

								<th>Description</th>
							</tr>
		</thead>
		<tbody>
						<tr>
				<td>
					default				</td>
				<td><code class="type type-mixed">mixed</code></td>

				<td data-label="Default:">
															<code>null</code>
									</td>

								<td>Sets the file(s), which are selected by default when a new page is created</td>
							</tr>
						<tr>
				<td>
					disabled				</td>
				<td><code class="type type-bool">bool</code></td>

				<td data-label="Default:">
															<code>null</code>
									</td>

								<td>If <code class="type type-bool">true</code>, the field is no longer editable and will not be saved</td>
							</tr>
						<tr>
				<td>
					empty				</td>
				<td><code class="type type-mixed">mixed</code></td>

				<td data-label="Default:">
															<code>null</code>
									</td>

								<td>The placeholder text if none have been selected yet</td>
							</tr>
						<tr>
				<td>
					help				</td>
				<td><code class="type type-mixed">mixed</code></td>

				<td data-label="Default:">
															<code>null</code>
									</td>

								<td>Optional help text below the field</td>
							</tr>
						<tr>
				<td>
					image				</td>
				<td><code class="type type-mixed">mixed</code></td>

				<td data-label="Default:">
															<code>null</code>
									</td>

								<td>Image settings for each item</td>
							</tr>
						<tr>
				<td>
					info				</td>
				<td><code class="type type-string">string</code></td>

				<td data-label="Default:">
															<code>null</code>
									</td>

								<td>Info text for each item</td>
							</tr>
						<tr>
				<td>
					label				</td>
				<td><code class="type type-mixed">mixed</code></td>

				<td data-label="Default:">
															<code>null</code>
									</td>

								<td>The field label can be set as string or associative array with translations</td>
							</tr>
						<tr>
				<td>
					layout				</td>
				<td><code class="type type-string">string</code></td>

				<td data-label="Default:">
															<code>'list'</code>
									</td>

								<td>Changes the layout of the selected entries. Available layouts: <code class="type">list</code>, <code class="type">cardlets</code>, <code class="type">cards</code></td>
							</tr>
						<tr>
				<td>
					link				</td>
				<td><code class="type type-bool">bool</code></td>

				<td data-label="Default:">
															<code>true</code>
									</td>

								<td>Whether each item should be clickable</td>
							</tr>
						<tr>
				<td>
					max				</td>
				<td><code class="type type-int">int</code></td>

				<td data-label="Default:">
															<code>null</code>
									</td>

								<td>The maximum number of allowed selected</td>
							</tr>
						<tr>
				<td>
					min				</td>
				<td><code class="type type-int">int</code></td>

				<td data-label="Default:">
															<code>null</code>
									</td>

								<td>The minimum number of required selected</td>
							</tr>
						<tr>
				<td>
					multiple				</td>
				<td><code class="type type-bool">bool</code></td>

				<td data-label="Default:">
															<code>true</code>
									</td>

								<td>If <code class="type type-bool">false</code>, only a single one can be selected</td>
							</tr>
						<tr>
				<td>
					query				</td>
				<td><code class="type type-string">string</code></td>

				<td data-label="Default:">
															<code>null</code>
									</td>

								<td>Query for the items to be included in the picker</td>
							</tr>
						<tr>
				<td>
					required				</td>
				<td><code class="type type-bool">bool</code></td>

				<td data-label="Default:">
															<code>null</code>
									</td>

								<td>If <code class="type type-bool">true</code>, the field has to be filled in correctly to be saved.</td>
							</tr>
						<tr>
				<td>
					search				</td>
				<td><code class="type type-bool">bool</code></td>

				<td data-label="Default:">
															<code>true</code>
									</td>

								<td>Enable/disable the search field in the picker</td>
							</tr>
						<tr>
				<td>
					size				</td>
				<td><code class="type type-string">string</code></td>

				<td data-label="Default:">
															<code>'auto'</code>
									</td>

								<td>Layout size for cards: <code class="type">tiny</code>, <code class="type">small</code>, <code class="type">medium</code>, <code class="type">large</code>, <code class="type">huge</code>, <code class="type">full</code></td>
							</tr>
						<tr>
				<td>
					store				</td>
				<td><code class="type type-string">string</code></td>

				<td data-label="Default:">
															<code>'uuid'</code>
									</td>

								<td>Whether to store UUID or ID in the content file of the model</td>
							</tr>
						<tr>
				<td>
					text				</td>
				<td><code class="type type-string">string</code></td>

				<td data-label="Default:">
															<code>null</code>
									</td>

								<td>Main text for each item</td>
							</tr>
						<tr>
				<td>
					translate				</td>
				<td><code class="type type-bool">bool</code></td>

				<td data-label="Default:">
															<code>true</code>
									</td>

								<td>If <code class="type type-bool">false</code>, the field will be disabled in non-default languages and cannot be translated. This is only relevant in multi-language setups.</td>
							</tr>
						<tr>
				<td>
					uploads				</td>
				<td><code class="type type-mixed">mixed</code></td>

				<td data-label="Default:">
															<code>[ ]</code>
									</td>

								<td>Sets the upload options for linked files (since 3.2.0)</td>
							</tr>
						<tr>
				<td>
					when				</td>
				<td><code class="type type-mixed">mixed</code></td>

				<td data-label="Default:">
															<code>null</code>
									</td>

								<td>Conditions when the field will be shown (since 3.1.0)</td>
							</tr>
						<tr>
				<td>
					width				</td>
				<td><code class="type type-string">string</code></td>

				<td data-label="Default:">
															<code>'1/1'</code>
									</td>

								<td>The width of the field in the field grid, e.g. <code class="type">1/1</code>, <code class="type">1/2</code>, <code class="type">1/3</code>, <code class="type">1/4</code>, <code class="type">2/3</code>, <code class="type">3/4</code></td>
							</tr>
					</tbody>
	</table>
</div>

## Limit the number of files

### Min and max files
You can set the minimum/maximum number of files that can be selected:

```yaml
fields:
  downloads:
    label: Select files...
    type: files
    min: 1
    max: 3
```

### Multiple or single mode

If you only want to select a single file, set `multiple` mode to `false` (default is `true`).

```yaml
fields:
  downloads:
    label: Select files...
    type: files
    multiple: false
```

## Layout

You can switch between `list` and `cards` layouts. Default is `list` layout.

```yaml
fields:
  downloads:
    label: Select files...
    type: files
    layout: cards
```

## Querying files

The `query` option lets you limit the set of files that can be included. When not set, it defaults to all files of the current page.

### Limit the set to images

```yaml
gallery:
  type: files
  query: page.images
```

You can use all file types available in Kirby here (`images`, `documents`, `videos`, `audio`, and `code`).

### Querying files from other pages

You can get as complex as you like, e.g. get all images from all children of the `photography` page that use the `cover` template:

```yaml
gallery:
  type: files
  query: site.find('photography').children.images.filterBy('template', 'cover')
```

You can find more examples of how you can use the query language in the <a href="https://getkirby.com/docs/guide/blueprints/query-language">guide</a>.

## Image options

<info>
Apart from showing no image, any image options you use will only apply to the 'card' layout, but not to the 'list' layout.
</info>

### `ratio`

A freely selectable image aspect ratio for various image styles such as movie trailers, movie posters, or simply portrait, landscape, square, etc.

```yaml
image:
  ratio: 16/9
```

### `cover`

Whether or not the image will fill (cover) the available image space and not show banding for images that don't match your chosen image aspect ratio.
Options: `true`, `false (default)`

```yaml
image:
  cover: true
```

### `back`

Set an image background behind the image, which will show if cover is not set to true as explained above.
Options: `pattern (default)`, `black`, `white`
```yaml

image:
  cover: true
  ratio: 1/1
  back: black
```

### No image

Don't want to see an image preview? Set the image options to `false` if you don't want to show an image, which reveals an icon instead:

```yml
image: false
```

## Upload options

By default, the files field allows you to upload files. You can define the `Add` button behavior with the `uploads` option: When clicking on the `Add` button, you can either select a file and/or upload a file (which is then automatically selected).

### Prevent uploading

You can alternatively set the `uploads` property to `false` to prevent any file uploads:

```yaml
gallery:
  type: files
  uploads: false
```

### Destination and template

By default, all files will be uploaded to the current page without any predefined template. But with the additional options, you can fetch files from anywhere, upload them to a specific page, or even control which file template should be assigned by default:

```yaml
gallery:
  type: files
  uploads:
    parent: site
    template: files-upload
```

If you want to upload to the current page and only assign a template, you can directly assign it to the `uploads` property:

```yaml
gallery:
  type: files
  uploads: files-upload
```

### Restricting uploads to certain file types

To restrict what types of files can be uploaded to the given destination, assign a file template using the `uploads` property, and in your file template, set the `accept` option. For more information see the docs about <a href="https://getkirby.com/docs/reference/panel/blueprints/file#accept">file blueprints</a>.

#### Supported file types

By default, Kirby supports <a href="https://getkirby.com/docs/guide/files#supported-file-types">several files types</a>.

To upload additional file types, you could <a href="https://getkirby.com/docs/reference/plugins/extensions/file-types">register new file types with the `fileTypes` extension</a> in a plugin.

<h2 id="pagination"><a href="#pagination" tabindex="-1">Pagination</a></h2>
<p>Options in the files picker are paginated. You can set the number of items per pagination page in the picker using the <code class="type">limit</code> property. The default setting is <code class="type">20</code>.</p>
<figure class="code">
<pre><code class="language-yaml">fields:
  files:
    type: files
    label: Select an item
    limit: 10</code></pre>
</figure>
<h2 id="search"><a href="#search" tabindex="-1">Search</a></h2>
<p>The files picker shows a search field by default. If you want to remove it, you can switch it off with the <code class="type">search</code> option:</p>
<figure class="code">
<pre><code class="language-yaml">fields:
  files:
    type: files
    label: Select an item
    search: false</code></pre>
</figure>

## How to use in templates/snippets

### Single file

To convert a single file to a file object, use the [`toFile()`](/docs/reference/templates/field-methods/to-file) method:

```php
<?php if ($image = $page->cover()->toFile()): ?>
  <img src="<?= $image->url() ?>" alt="">
<?php endif ?>
```

### Multiple files

To work with or reference multiple files, create the group of files using the [`toFiles()`](/docs/reference/templates/field-methods/to-files) method:

```php
<?php
$images =  $page->gallery()->toFiles();
foreach($images as $image): ?>
  <img src="<?= $image->url() ?>" alt="">
<?php endforeach ?>
```