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

<script>
  import { open, save, confirm, message } from "@tauri-apps/plugin-dialog";
  import { readFile } from "@tauri-apps/plugin-fs";

  export let onMessage;
  export let insecureRenderHtml;
  let defaultPath = null;
  let filter = null;
  let multiple = false;
  let directory = false;
  let pickerMode = "";

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

  async function prompt() {
    confirm("Do you want to do something?")
      .then((res) => onMessage(res ? "Yes" : "No"))
      .catch(onMessage);
  }

  async function promptCustom() {
    confirm("Is Tauri awesome?", {
      okLabel: "Absolutely",
      cancelLabel: "Totally",
    })
      .then((res) =>
        onMessage(
          res ? "Tauri is absolutely awesome" : "Tauri is totally awesome"
        )
      )
      .catch(onMessage);
  }

  async function msg() {
    await message("Tauri is awesome!");
  }

  async function msgCustom(result) {
    const buttons = { yes: "awesome", no: "amazing", cancel: "stunning" };
    await message(`Tauri is: `, { buttons })
      .then((res) => onMessage(`Tauri is ${res}`))
      .catch(onMessage);
  }

  function openDialog() {
    open({
      title: "My wonderful open dialog",
      defaultPath,
      filters: filter
        ? [
            {
              name: "Tauri Example",
              extensions: filter.split(",").map((f) => f.trim()),
            },
          ]
        : [],
      multiple,
      directory,
      pickerMode: pickerMode === "" ? undefined : pickerMode,
    })
      .then(function (res) {
        if (Array.isArray(res)) {
          onMessage(res);
        } else {
          var pathToRead = res;
          var isFile = pathToRead.match(/\S+\.\S+$/g);
          readFile(pathToRead)
            .then(function (response) {
              if (isFile) {
                if (
                  pathToRead.includes(".png") ||
                  pathToRead.includes(".jpg") ||
                  pathToRead.includes(".jpeg")
                ) {
                  arrayBufferToBase64(
                    new Uint8Array(response),
                    function (base64) {
                      var src = "data:image/png;base64," + base64;
                      insecureRenderHtml('<img src="' + src + '"></img>');
                    }
                  );
                } else {
                  onMessage(res);
                }
              } else {
                onMessage(res);
              }
            })
            .catch(onMessage);
        }
      })
      .catch(onMessage);
  }

  function saveDialog() {
    save({
      title: "My wonderful save dialog",
      defaultPath,
      filters: filter
        ? [
            {
              name: "Tauri Example",
              extensions: filter.split(",").map((f) => f.trim()),
            },
          ]
        : [],
      })
      .then(onMessage)
      .catch(onMessage);
  }
</script>

<div class="flex gap-2 children:grow">
  <input
    class="input"
    id="dialog-default-path"
    placeholder="Default path"
    bind:value={defaultPath}
  />
  <input
    class="input"
    id="dialog-filter"
    placeholder="Extensions filter, comma-separated"
    bind:value={filter}
  />
</div>

<br />
<div>
  <input type="checkbox" id="dialog-multiple" bind:checked={multiple} />
  <label for="dialog-multiple">Multiple</label>
</div>
<div>
  <input type="checkbox" id="dialog-directory" bind:checked={directory} />
  <label for="dialog-directory">Directory</label>
</div>
<div>
  <label for="dialog-picker-mode">Picker Mode:</label>
  <select id="dialog-picker-mode" bind:value={pickerMode}>
    <option value="">None</option>
    <option value="media">Media</option>
    <option value="image">Image</option>
    <option value="video">Video</option>
    <option value="document">Document</option>
  </select>
</div>
<br />

<div class="flex flex-wrap flex-col md:flex-row gap-2 children:flex-shrink-0">
  <button class="btn" id="open-dialog" on:click={openDialog}>Open dialog</button>
  <button class="btn" id="save-dialog" on:click={saveDialog}
    >Open save dialog</button
  >
  <button class="btn" id="prompt-dialog" on:click={prompt}>Prompt</button>
  <button class="btn" id="custom-prompt-dialog" on:click={promptCustom}
    >Prompt (custom)</button
  >
  <button class="btn" id="message-dialog" on:click={msg}>Message</button>
  <button class="btn" id="message-dialog" on:click={msgCustom}>Message (custom)</button>

</div>