tauri-plugins-workspace/examples/api/src/views/FileSystem.svelte

<script>
  import {
    readBinaryFile,
    writeTextFile,
    readDir,
    Dir
  } from 'tauri-plugin-fs-api'
  import { convertFileSrc } from '@tauri-apps/api/tauri'

  export let onMessage
  export let insecureRenderHtml

  let pathToRead = ''
  let img

  function getDir() {
    const dirSelect = document.getElementById('dir')
    return dirSelect.value ? parseInt(dir.value) : null
  }

  function arrayBufferToBase64(buffer, callback) {
    const blob = new Blob([buffer], {
      type: 'application/octet-binary'
    })
    const reader = new FileReader()
    reader.onload = function (evt) {
      const dataurl = evt.target.result
      callback(dataurl.substr(dataurl.indexOf(',') + 1))
    }
    reader.readAsDataURL(blob)
  }

  const DirOptions = Object.keys(Dir)
    .filter((key) => isNaN(parseInt(key)))
    .map((dir) => [dir, Dir[dir]])

  function read() {
    const isFile = pathToRead.match(/\S+\.\S+$/g)
    const opts = {
      dir: getDir()
    }
    const promise = isFile
      ? readBinaryFile(pathToRead, opts)
      : readDir(pathToRead, opts)
    promise
      .then(function (response) {
        if (isFile) {
          if (pathToRead.includes('.png') || pathToRead.includes('.jpg')) {
            arrayBufferToBase64(new Uint8Array(response), function (base64) {
              const src = 'data:image/png;base64,' + base64
              insecureRenderHtml('<img src="' + src + '"></img>')
            })
          } else {
            const value = String.fromCharCode.apply(null, response)
            insecureRenderHtml(
              '<textarea id="file-response"></textarea><button id="file-save">Save</button>'
            )
            setTimeout(() => {
              const fileInput = document.getElementById('file-response')
              fileInput.value = value
              document
                .getElementById('file-save')
                .addEventListener('click', function () {
                  writeTextFile(pathToRead, fileInput.value, {
                    dir: getDir()
                  }).catch(onMessage)
                })
            })
          }
        } else {
          onMessage(response)
        }
      })
      .catch(onMessage)
  }

  function setSrc() {
    img.src = convertFileSrc(pathToRead)
  }
</script>

<form class="flex flex-col" on:submit|preventDefault={read}>
  <div class="flex gap-1">
    <select class="input" id="dir">
      <option value="">None</option>
      {#each DirOptions as dir}
        <option value={dir[1]}>{dir[0]}</option>
      {/each}
    </select>
    <input
      class="input grow"
      id="path-to-read"
      placeholder="Type the path to read..."
      bind:value={pathToRead}
    />
  </div>
  <br />
  <div>
    <button class="btn" id="read">Read</button>
    <button class="btn" type="button" on:click={setSrc}>Use as img src</button>
  </div>
</form>

<br />

<img alt="" bind:this={img} />