FileInputList

Drop it like it's hot (the list).

Example with standard input

Example with preview input

Props

🕹️ standard props
files
File[]
List of selected files
[]
persistOverUpload
boolean
Whether to keep previous files when adding new ones
true
dropAreaActive
boolean
Whether the drop area is active
true
icon
string
Icon for file representation
'mdi-file-document'
message
string
Message displayed when no files are selected
'Drop file here or click to upload'
disabled
boolean
Whether the file input is disabled
false
maxFiles
number
Maximum number of files allowed
undefined
class
string
Additional CSS classes
''
previewFiles
boolean
When true, image files are displayed as a preview. Non-image files will show the document title and icon.
false
🎨 style props
--file-input-list-height
size
Height of the file input list
64px
--file-input-list-background-color
color
Background color of the file input list
rgb(var(--global-color-background-300))
--file-input-list-color
color
Text color of the file input list
rgb(var(--global-color-contrast-900))
--file-input-list-selected-row-color
color
Text color of the selected file row
rgb(var(--global-color-contrast-1000))
--file-input-list-selected-row-background
color
Background color of the selected file row
rgb(var(--global-color-background-500))
--file-input-list-hover-color
color
Text color when hovering over the file input list
rgb(var(--global-color-contrast-900))
--file-input-list-border-color
color
Border color of the file input list
rgb(var(--global-color-primary-100))
--file-input-list-border-radius
size
Border radius of the file input list
5px

Slots

bodySnippet

Custom content inside the file input area

Default content:

<span
  style:height="100%"
  style:width="100%"
  style:display="flex"
>
  <div class="body-container" class:{active}>
    {#if files.length == 0}
      {#if messageSnippet}
        {@render messageSnippet({ message })}
      {:else}
        <span>{message}</span>
      {/if}
    {:else}
      {#if fileListSnippet}
        {@render fileListSnippet({ files })}
      {:else}
        <table class="file-list">
          <tbody>
            {#each files as file}
              <tr
                onclick={(e) => {
                  e.stopPropagation()
                  handleFileClick(file);
                }}
                onmouseenter={(e) => {
                  e.stopPropagation()
                  handleFileMouseEnter(file);
                }}
                onmouseleave={(e) => {
                  e.stopPropagation()
                  handleFileMouseLeave();
                }}
                class:file-active={fileActive == file}
              >
                <td>
                  <Icon name={icon} />
                </td>
                <td class="file-name">
                  {file.name}
                </td>
                <td>
                  {file.size}
                </td>
                <td style:width="10%" style:margin-right="10px">
                  <Button
                    buttonType="text"
                    icon="mdi-close"
                    onclick={(e) => {
                      e.detail.nativeEvent.stopPropagation();
                      handleRemove(file);
                    }}
                  />
                </td>
              </tr>
            {/each}
          </tbody>
        </table>
      {/if}
    {/if}
  </div>
</span>
    

Available variables:

Name	Type	Description
active	boolean	Whether the drop area is active

messageSnippet

Custom message when no files are selected

Default content:

<span>{message}</span>

Available variables:

Name	Type	Description
message	string | undefined	The message to display

fileListSnippet

Custom file list display

Default content:

<table class="file-list">
  <tbody>
    {#each files as file}
      <tr
        onclick={(e) => {
          e.stopPropagation()
          handleFileClick(file);
        }}
        onmouseenter={(e) => {
          e.stopPropagation()
          handleFileMouseEnter(file);
        }}
        onmouseleave={(e) => {
          e.stopPropagation()
          handleFileMouseLeave();
        }}
        class:file-active={fileActive == file}
      >
        <td>
          <Icon name={icon} />
        </td>
        <td class="file-name">
          {file.name}
        </td>
        <td>
          {file.size}
        </td>
        <td style:width="10%" style:margin-right="10px">
          <Button
            buttonType="text"
            icon="mdi-close"
            onclick={(e) => {
              e.detail.nativeEvent.stopPropagation();
              handleRemove(file);
            }}
          />
        </td>
      </tr>
    {/each}
  </tbody>
</table>
    

Available variables:

Name	Type	Description
files	File[]	List of selected files

Events

onchange
Triggered when the file selection changes
onfileChange

Triggered when files are added or removed

Attribute	Type	Description
files	File[]	Updated list of files

onfileDrop
Triggered when files are dropped
onfileSelect
Triggered when files are selected via input