plugins-workspace/examples/api/src/views/Dialog.svelte at e3fc76e63c5438f8df159b2f6413fd2652d91f4a · tauri-apps/plugins-workspace · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<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;

  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,
    })
      .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(res));
        }
      })
      .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>
<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>