File

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