File

A file input control.

Important: This component has some rough edges, and should be considered experimental.

Integrates the File Input control from LuchoTurtle's tweakpane-plugin-file-import plugin. Some of the control's parameter names have been changed for consistency with the <Image> CompositionEvent.

Use the <Image> control instead if you're working with images and want to see a thumbnail preview of the image.

There is currently a known bug where change events' origin values are sometimes incorrect. (This issue is limited to this component.)

Usage outside of a <Pane> component will implicitly wrap the image control in <Pane position="inline">.

Note that Svelte Tweakpane UI embeds a functionally identical fork of the plugin with build optimizations.

---

Example

Demo

Loading...

Code

FileExample.svelte

<script lang="ts">
  import { File, type FileValue } from 'svelte-tweakpane-ui'

  let file: FileValue

  async function getFileBase64(file: FileValue): Promise<string> {
    if (file === undefined) return 'Your bytes here...'
    return new Promise((resolve, reject) => {
      const reader = new FileReader()
      reader.addEventListener('load', () => {
        const { result } = reader
        if (result && typeof result === 'string') resolve(result)
        else reject(new Error('Empty result'))
      })
      reader.addEventListener('error', reject)
      reader.readAsDataURL(file)
    })
  }

  function truncate(text: string, length: number) {
    return text.length > length ? text.slice(0, length - 1) + '...' : text
  }
</script>

<File bind:value={file} label="File" />

<div class="demo">
  <p>
    {#await getFileBase64(file)}
      Loading...
    {:then value}
      {truncate(value, 512)}
    {/await}
  </p>
</div>

<style>
  .demo {
    width: 100%;
    background: linear-gradient(45deg, orange, magenta);
  }

  .demo > p {
    margin: 0;
    padding: 0.5rem;
    font-family: monospace;
    line-height: 1.2;
    color: white;
    word-break: break-all;
    white-space: pre-wrap;
  }
</style>

---

Props

options optional
Description	Tweakpane's internal options object. See BindingParams. Valid types are contingent on the type of the value key points to in object. This is intended internal use, when implementing convenience components wrapping Binding's functionality. Options of interest are instead exposed as top-level props in Svelte Tweakpane UI.
Type	BaseInputParams
Default	undefined

disabled optional
Description	Prevent interactivity and gray out the control.
Type	boolean
Default	false

theme optional
Description	Custom color scheme. If undefined, inherits default Tweakpane theme equivalent to ThemeUtils.presets.standard, or the theme set with setGlobalDefaultTheme().
Type	Theme
Default	undefined

label optional
Description	Text displayed next to control.
Type	string
Default	undefined

value bindablerequired
Description	File data, or undefined to clear the file input.
Type	FileValue

extensions optional
Description	Array of valid file extensions.
Type	string[]
Default	Any file extension

invalidExtensionMessage optional
Description	String shown when the user tries to upload an invalid filetype.
Type	string
Default	'Unaccepted file type.'

rows optional
Description	Height of the file input drop zone, in rows.
Type	number
Default	3

---

Events

change
Description	Fires when value changes. This event is provided for advanced use cases. It's usually preferred to bind to the value prop instead. The event.details payload includes a copy of the value and an origin field to distinguish between user-interactive changes (internal) and changes resulting from programmatic manipulation of the value (external).
Extends	ValueChangeEvent
Type	FileChangeEvent