learning-jsdp/ch09/async_readwrite_files.html at main · addyosmani/learning-jsdp · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>File System Access API Example</title>
</head>
<body>
  <button id="readFileBtn">Read File</button>
  <button id="writeFileBtn">Write File</button>
  <textarea id="fileContent" rows="10" cols="30"></textarea>
  <script>
document.getElementById('readFileBtn').addEventListener('click', async () => {
  try {
    const fileHandles = await window.showOpenFilePicker();
    const fileHandle = fileHandles[0];
    const file = await fileHandle.getFile();
    const fileContent = await file.text();
    document.getElementById('fileContent').value = fileContent;
  } catch (error) {
    console.error(error);
  }
});

document.getElementById('writeFileBtn').addEventListener('click', async () => {
  try {
    const fileContent = document.getElementById('fileContent').value;
    const fileHandle = await window.showSaveFilePicker();
    const writableStream = await fileHandle.createWritable();
    await writableStream.write(fileContent);
    await writableStream.close();
  } catch (error) {
    console.error(error);
  }
});


  </script>
</body>
</html>